feat: skip intro

Added skip intro logic Updated control button to take an icon or text Signed-off-by: Lance Chant <13349722+lancechant@users.noreply.github.com>
2026-03-15 13:56:19 +00:00 · 2026-01-27 09:01:32 +02:00
179 changed files with 3708 additions and 11524 deletions
--- a/.claude/agents/tv-validator.md
+++ b/.claude/agents/tv-validator.md
@@ -1,103 +0,0 @@
---
-name: tv-validator
-description: Use this agent to review TV platform code for correct patterns and conventions. Use proactively after writing or modifying TV components. Validates focus handling, modal patterns, typography, list components, and other TV-specific requirements.
-tools: Read, Glob, Grep
-model: haiku
-color: blue
---
-
-You are a TV platform code reviewer for Streamyfin, a React Native app with Apple TV and Android TV support. Review code for correct TV patterns and flag violations.
-
-## Critical Rules to Check
-
-### 1. No .tv.tsx File Suffix
-The `.tv.tsx` suffix does NOT work in this project. Metro bundler doesn't resolve it.
-
-**Violation**: Creating files like `MyComponent.tv.tsx` expecting auto-resolution
-**Correct**: Use `Platform.isTV` conditional rendering in the main file:
-```typescript
-if (Platform.isTV) {
-  return <TVMyComponent />;
-}
-return <MyComponent />;
-```
-
-### 2. No FlashList on TV
-FlashList has focus issues on TV. Use FlatList instead.
-
-**Violation**: `<FlashList` in TV code paths
-**Correct**:
-```typescript
-{Platform.isTV ? (
-  <FlatList removeClippedSubviews={false} ... />
-) : (
-  <FlashList ... />
-)}
-```
-
-### 3. Modal Pattern
-Never use overlay/absolute-positioned modals on TV. They break back button handling.
-
-**Violation**: `position: "absolute"` or `Modal` component for TV overlays
-**Correct**: Use navigation-based pattern:
- Create Jotai atom for state
- Hook that sets atom and calls `router.push()`
- Page in `app/(auth)/` that reads atom
- `Stack.Screen` with `presentation: "transparentModal"`
-
-### 4. Typography
-All TV text must use `TVTypography` component.
-
-**Violation**: Raw `<Text>` in TV components
-**Correct**: `<TVTypography variant="title">...</TVTypography>`
-
-### 5. No Purple Accent Colors
-TV uses white for focus states, not purple.
-
-**Violation**: Purple/violet colors in TV focused states
-**Correct**: White (`#fff`, `white`) for focused states with `expo-blur` for backgrounds
-
-### 6. Focus Handling
- Only ONE element should have `hasTVPreferredFocus={true}`
- Focusable items need `disabled={isModalOpen}` when overlays are visible
- Use `onFocus`/`onBlur` with scale animations
- Add padding for scale animations (focus scale clips without it)
-
-### 7. List Configuration
-TV lists need:
- `removeClippedSubviews={false}`
- `overflow: "visible"` on containers
- Sufficient padding for focus scale animations
-
-### 8. Horizontal Padding
-Use `TV_HORIZONTAL_PADDING` constant (60), not old `TV_SCALE_PADDING` (20).
-
-### 9. Focus Guide Navigation
-For non-adjacent sections, use `TVFocusGuideView` with `destinations` prop.
-Use `useState` for refs (not `useRef`) to trigger re-renders.
-
-## Review Process
-
-1. Read the file(s) to review
-2. Check each rule above
-3. Report violations with:
-   - Line number
-   - What's wrong
-   - How to fix it
-4. If no violations, confirm the code follows TV patterns
-
-## Output Format
-
-```
-## TV Validation Results
-
-### ✓ Passes
- [List of rules that pass]
-
-### ✗ Violations
- **[Rule Name]** (line X): [Description]
-  Fix: [How to correct it]
-
-### Recommendations
- [Optional suggestions for improvement]
-```
--- a/.claude/commands/reflect.md
+++ b/.claude/commands/reflect.md
@@ -12,59 +12,26 @@ Analyze the current conversation to extract useful facts that should be remember

 ## Instructions

-1. Read the Learned Facts Index section in `CLAUDE.md` and scan existing files in `.claude/learned-facts/` to understand what's already recorded
+1. Read the existing facts file at `.claude/learned-facts.md`
 2. Review this conversation for learnings worth preserving
 3. For each new fact:
-   - Create a new file in `.claude/learned-facts/[kebab-case-name].md` using the template below
-   - Append a new entry to the appropriate category in the **Learned Facts Index** section of `CLAUDE.md`
+   - Write it concisely (1-2 sentences max)
+   - Include context for why it matters
+   - Add today's date
 4. Skip facts that duplicate existing entries
-5. If a new category is needed, add it to the index in `CLAUDE.md`
+5. Append new facts to `.claude/learned-facts.md`

-## Fact File Template
+## Fact Format

-Create each file at `.claude/learned-facts/[kebab-case-name].md`:
-
-```markdown
-# [Title]
-
-**Date**: YYYY-MM-DD
-**Category**: navigation | tv | native-modules | state-management | ui
-**Key files**: `relevant/paths.ts`
-
-## Detail
-
-[Full description of the fact, including context for why it matters]
+Use this format for each fact:
+```
+- **[Brief Topic]**: [Concise description of the fact] _(YYYY-MM-DD)_
 ```

-## Index Entry Format
+## Example Facts

-Append to the appropriate category in the Learned Facts Index section of `CLAUDE.md`:
+- **State management**: Use Jotai atoms for global state, NOT React Context - atoms are in `utils/atoms/` _(2025-01-09)_
+- **Package manager**: Always use `bun`, never npm or yarn - the project is configured for bun only _(2025-01-09)_
+- **TV platform**: Check `Platform.isTV` for TV-specific code paths, not just OS checks _(2025-01-09)_

-```
- `kebab-case-name` | Brief one-line summary of the fact
-```
-
-Categories: Navigation, UI/Headers, State/Data, Native Modules, TV Platform
-
-## Example
-
-File `.claude/learned-facts/state-management-pattern.md`:
-```markdown
-# State Management Pattern
-
-**Date**: 2025-01-09
-**Category**: state-management
-**Key files**: `utils/atoms/`
-
-## Detail
-
-Use Jotai atoms for global state, NOT React Context. Atoms are defined in `utils/atoms/`.
-```
-
-Index entry in `CLAUDE.md`:
-```
-State/Data:
- `state-management-pattern` | Use Jotai atoms for global state, not React Context
-```
-
-After updating, summarize what facts you added (or note if nothing new was learned this session).
+After updating the file, summarize what facts you added (or note if nothing new was learned this session).
--- a/.claude/learned-facts.md
+++ b/.claude/learned-facts.md
@@ -1,11 +1,8 @@
-# Learned Facts (DEPRECATED)
+# Learned Facts

-> **DEPRECATED**: This file has been replaced by individual fact files in `.claude/learned-facts/`.
-> The compressed index is now inline in `CLAUDE.md` under "Learned Facts Index".
-> New facts should be added as individual files using the `/reflect` command.
-> This file is kept for reference only and is no longer auto-imported.
+This file contains facts about the codebase learned from past sessions. These are things Claude got wrong or needed clarification on, stored here to prevent the same mistakes in future sessions.

-This file previously contained facts about the codebase learned from past sessions.
+This file is auto-imported into CLAUDE.md and loaded at the start of each session.

 ## Facts

@@ -43,6 +40,4 @@ This file previously contained facts about the codebase learned from past sessio

 - **Native SwiftUI view sizing**: When creating Expo native modules with SwiftUI views, the view needs explicit dimensions. Use a `width` prop passed from React Native, set an explicit `.frame(width:height:)` in SwiftUI, and override `intrinsicContentSize` in the ExpoView wrapper to report the correct size to React Native's layout system. Using `.aspectRatio(contentMode: .fit)` alone causes inconsistent sizing. _(2026-01-25)_

- **Streamystats components location**: Streamystats TV components are at `components/home/StreamystatsRecommendations.tv.tsx` and `components/home/StreamystatsPromotedWatchlists.tv.tsx`. The watchlist detail page (which shows items in a grid) is at `app/(auth)/(tabs)/(watchlists)/[watchlistId].tsx`. _(2026-01-25)_
-
- **Platform-specific file suffix (.tv.tsx) does NOT work**: The `.tv.tsx` file suffix does NOT work for either pages or components in this project. Metro bundler doesn't resolve platform-specific suffixes. Instead, use `Platform.isTV` conditional rendering within a single file. For pages: check `Platform.isTV` at the top and return the TV component early. For components: create separate `MyComponent.tsx` and `TVMyComponent.tsx` files and use `Platform.isTV` to choose which to render. _(2026-01-26)_
+- **Streamystats components location**: Streamystats TV components are at `components/home/StreamystatsRecommendations.tv.tsx` and `components/home/StreamystatsPromotedWatchlists.tv.tsx`. The watchlist detail page (which shows items in a grid) is at `app/(auth)/(tabs)/(watchlists)/[watchlistId].tsx`. _(2026-01-25)_
--- a/.claude/learned-facts/header-button-locations.md
+++ b/.claude/learned-facts/header-button-locations.md
@@ -1,9 +0,0 @@
-# Header Button Locations
-
-**Date**: 2026-01-10
-**Category**: ui
-**Key files**: `app/(auth)/(tabs)/(home)/_layout.tsx`, `components/common/HeaderBackButton.tsx`, `components/Chromecast.tsx`, `components/RoundButton.tsx`, `components/home/Home.tsx`, `app/(auth)/(tabs)/(home)/downloads/index.tsx`
-
-## Detail
-
-Header buttons are defined in multiple places: `app/(auth)/(tabs)/(home)/_layout.tsx` (SettingsButton, SessionsButton, back buttons), `components/common/HeaderBackButton.tsx` (reusable), `components/Chromecast.tsx`, `components/RoundButton.tsx`, and dynamically via `navigation.setOptions()` in `components/home/Home.tsx` and `app/(auth)/(tabs)/(home)/downloads/index.tsx`.
--- a/.claude/learned-facts/intro-modal-trigger-location.md
+++ b/.claude/learned-facts/intro-modal-trigger-location.md
@@ -1,9 +0,0 @@
-# Intro Modal Trigger Location
-
-**Date**: 2025-01-09
-**Category**: navigation
-**Key files**: `components/home/Home.tsx`, `app/(auth)/(tabs)/_layout.tsx`
-
-## Detail
-
-The intro modal trigger logic should be in the `Home.tsx` component, not in the tabs `_layout.tsx`. Triggering modals from tab layout can interfere with native bottom tabs navigation.
--- a/.claude/learned-facts/introsheet-rendering-location.md
+++ b/.claude/learned-facts/introsheet-rendering-location.md
@@ -1,9 +0,0 @@
-# IntroSheet Rendering Location
-
-**Date**: 2025-01-09
-**Category**: navigation
-**Key files**: `providers/IntroSheetProvider`, `components/IntroSheet`
-
-## Detail
-
-The `IntroSheet` component is rendered inside `IntroSheetProvider` which wraps the entire navigation stack. Any hooks in IntroSheet that interact with navigation state can affect the native bottom tabs.
--- a/.claude/learned-facts/macos-header-buttons-fix.md
+++ b/.claude/learned-facts/macos-header-buttons-fix.md
@@ -1,9 +0,0 @@
-# macOS Header Buttons Fix
-
-**Date**: 2026-01-10
-**Category**: ui
-**Key files**: `components/common/HeaderBackButton.tsx`, `app/(auth)/(tabs)/(home)/_layout.tsx`
-
-## Detail
-
-Header buttons (`headerRight`/`headerLeft`) don't respond to touches on macOS Catalyst builds when using standard React Native `TouchableOpacity`. Fix by using `Pressable` from `react-native-gesture-handler` instead. The library is already installed and `GestureHandlerRootView` wraps the app.
--- a/.claude/learned-facts/mark-as-played-flow.md
+++ b/.claude/learned-facts/mark-as-played-flow.md
@@ -1,9 +0,0 @@
-# Mark as Played Flow
-
-**Date**: 2026-01-10
-**Category**: state-management
-**Key files**: `components/PlayedStatus.tsx`, `hooks/useMarkAsPlayed.ts`
-
-## Detail
-
-The "mark as played" button uses `PlayedStatus` component → `useMarkAsPlayed` hook → `usePlaybackManager.markItemPlayed()`. The hook does optimistic updates via `setQueriesData` before calling the API. Located in `components/PlayedStatus.tsx` and `hooks/useMarkAsPlayed.ts`.
--- a/.claude/learned-facts/mpv-avfoundation-composite-osd-ordering.md
+++ b/.claude/learned-facts/mpv-avfoundation-composite-osd-ordering.md
@@ -1,9 +0,0 @@
-# MPV avfoundation-composite-osd Ordering
-
-**Date**: 2026-01-22
-**Category**: native-modules
-**Key files**: `modules/mpv-player/ios/MPVLayerRenderer.swift`
-
-## Detail
-
-On tvOS, the `avfoundation-composite-osd` option MUST be set immediately after `vo=avfoundation`, before any `hwdec` options. Skipping or reordering this causes the app to freeze when exiting the player. Set to "no" on tvOS (prevents gray tint), "yes" on iOS (for PiP subtitle support).
--- a/.claude/learned-facts/mpv-tvos-player-exit-freeze.md
+++ b/.claude/learned-facts/mpv-tvos-player-exit-freeze.md
@@ -1,9 +0,0 @@
-# MPV tvOS Player Exit Freeze
-
-**Date**: 2026-01-22
-**Category**: native-modules
-**Key files**: `modules/mpv-player/ios/MPVLayerRenderer.swift`
-
-## Detail
-
-On tvOS, `mpv_terminate_destroy` can deadlock if called while blocking the main thread (e.g., via `queue.sync`). The fix is to run `mpv_terminate_destroy` on `DispatchQueue.global()` asynchronously, allowing it to access main thread for AVFoundation/GPU cleanup. Send `quit` command and drain events first.
--- a/.claude/learned-facts/native-bottom-tabs-userouter-conflict.md
+++ b/.claude/learned-facts/native-bottom-tabs-userouter-conflict.md
@@ -1,9 +0,0 @@
-# Native Bottom Tabs + useRouter Conflict
-
-**Date**: 2025-01-09
-**Category**: navigation
-**Key files**: `providers/`, `app/_layout.tsx`
-
-## Detail
-
-When using `@bottom-tabs/react-navigation` with Expo Router, avoid using the `useRouter()` hook in components rendered at the provider level (outside the tab navigator). The hook subscribes to navigation state changes and can cause unexpected tab switches. Use the static `router` import from `expo-router` instead.
--- a/.claude/learned-facts/native-swiftui-view-sizing.md
+++ b/.claude/learned-facts/native-swiftui-view-sizing.md
@@ -1,9 +0,0 @@
-# Native SwiftUI View Sizing
-
-**Date**: 2026-01-25
-**Category**: native-modules
-**Key files**: `modules/`
-
-## Detail
-
-When creating Expo native modules with SwiftUI views, the view needs explicit dimensions. Use a `width` prop passed from React Native, set an explicit `.frame(width:height:)` in SwiftUI, and override `intrinsicContentSize` in the ExpoView wrapper to report the correct size to React Native's layout system. Using `.aspectRatio(contentMode: .fit)` alone causes inconsistent sizing.
--- a/.claude/learned-facts/platform-specific-file-suffix-does-not-work.md
+++ b/.claude/learned-facts/platform-specific-file-suffix-does-not-work.md
@@ -1,9 +0,0 @@
-# Platform-Specific File Suffix (.tv.tsx) Does NOT Work
-
-**Date**: 2026-01-26
-**Category**: tv
-**Key files**: `app/`, `components/`
-
-## Detail
-
-The `.tv.tsx` file suffix does NOT work for either pages or components in this project. Metro bundler doesn't resolve platform-specific suffixes. Instead, use `Platform.isTV` conditional rendering within a single file. For pages: check `Platform.isTV` at the top and return the TV component early. For components: create separate `MyComponent.tsx` and `TVMyComponent.tsx` files and use `Platform.isTV` to choose which to render.
--- a/.claude/learned-facts/stack-screen-header-configuration.md
+++ b/.claude/learned-facts/stack-screen-header-configuration.md
@@ -1,9 +0,0 @@
-# Stack Screen Header Configuration
-
-**Date**: 2026-01-10
-**Category**: ui
-**Key files**: `app/(auth)/(tabs)/(home)/_layout.tsx`
-
-## Detail
-
-Sub-pages under `(home)` need explicit `Stack.Screen` entries in `app/(auth)/(tabs)/(home)/_layout.tsx` with `headerTransparent: Platform.OS === "ios"`, `headerBlurEffect: "none"`, and a back button. Without this, pages show with wrong header styling.
--- a/.claude/learned-facts/streamystats-components-location.md
+++ b/.claude/learned-facts/streamystats-components-location.md
@@ -1,9 +0,0 @@
-# Streamystats Components Location
-
-**Date**: 2026-01-25
-**Category**: tv
-**Key files**: `components/home/StreamystatsRecommendations.tv.tsx`, `components/home/StreamystatsPromotedWatchlists.tv.tsx`, `app/(auth)/(tabs)/(watchlists)/[watchlistId].tsx`
-
-## Detail
-
-Streamystats TV components are at `components/home/StreamystatsRecommendations.tv.tsx` and `components/home/StreamystatsPromotedWatchlists.tv.tsx`. The watchlist detail page (which shows items in a grid) is at `app/(auth)/(tabs)/(watchlists)/[watchlistId].tsx`.
--- a/.claude/learned-facts/tab-folder-naming.md
+++ b/.claude/learned-facts/tab-folder-naming.md
@@ -1,9 +0,0 @@
-# Tab Folder Naming
-
-**Date**: 2025-01-09
-**Category**: navigation
-**Key files**: `app/(auth)/(tabs)/`
-
-## Detail
-
-The tab folders use underscore prefix naming like `(_home)` instead of just `(home)` based on the project's file structure conventions.
--- a/.claude/learned-facts/thread-safe-state-for-stop-flags.md
+++ b/.claude/learned-facts/thread-safe-state-for-stop-flags.md
@@ -1,9 +0,0 @@
-# Thread-Safe State for Stop Flags
-
-**Date**: 2026-01-22
-**Category**: native-modules
-**Key files**: `modules/mpv-player/ios/MPVLayerRenderer.swift`
-
-## Detail
-
-When using flags like `isStopping` that control loop termination across threads, the setter must be synchronous (`stateQueue.sync`) not async, otherwise the value may not be visible to other threads in time.
--- a/.claude/learned-facts/tv-grid-layout-pattern.md
+++ b/.claude/learned-facts/tv-grid-layout-pattern.md
@@ -1,9 +0,0 @@
-# TV Grid Layout Pattern
-
-**Date**: 2026-01-25
-**Category**: tv
-**Key files**: `components/tv/`
-
-## Detail
-
-For TV grids, use ScrollView with flexWrap instead of FlatList/FlashList with numColumns. FlatList's numColumns divides width evenly among columns which causes inconsistent item sizing. Use `flexDirection: "row"`, `flexWrap: "wrap"`, `justifyContent: "center"`, and `gap` for spacing.
--- a/.claude/learned-facts/tv-horizontal-padding-standard.md
+++ b/.claude/learned-facts/tv-horizontal-padding-standard.md
@@ -1,9 +0,0 @@
-# TV Horizontal Padding Standard
-
-**Date**: 2026-01-25
-**Category**: tv
-**Key files**: `components/tv/`, `app/(auth)/(tabs)/`
-
-## Detail
-
-TV pages should use `TV_HORIZONTAL_PADDING = 60` to match other TV pages like Home, Search, etc. The old `TV_SCALE_PADDING = 20` was too small.
--- a/.claude/learned-facts/tv-modals-must-use-navigation-pattern.md
+++ b/.claude/learned-facts/tv-modals-must-use-navigation-pattern.md
@@ -1,9 +0,0 @@
-# TV Modals Must Use Navigation Pattern
-
-**Date**: 2026-01-24
-**Category**: tv
-**Key files**: `hooks/useTVOptionModal.ts`, `app/(auth)/tv-option-modal.tsx`
-
-## Detail
-
-On TV, never use overlay/absolute-positioned modals (like `TVOptionSelector` at the page level). They don't handle the back button correctly. Always use the navigation-based modal pattern: Jotai atom + hook that calls `router.push()` + page in `app/(auth)/`. Use the existing `useTVOptionModal` hook and `tv-option-modal.tsx` page for option selection. `TVOptionSelector` is only appropriate as a sub-selector *within* a navigation-based modal page.
--- a/.claude/learned-facts/use-network-aware-query-client-limitations.md
+++ b/.claude/learned-facts/use-network-aware-query-client-limitations.md
@@ -1,9 +0,0 @@
-# useNetworkAwareQueryClient Limitations
-
-**Date**: 2026-01-10
-**Category**: state-management
-**Key files**: `hooks/useNetworkAwareQueryClient.ts`
-
-## Detail
-
-The `useNetworkAwareQueryClient` hook uses `Object.create(queryClient)` which breaks QueryClient methods that use JavaScript private fields (like `getQueriesData`, `setQueriesData`, `setQueryData`). Only use it when you ONLY need `invalidateQueries`. For cache manipulation, use standard `useQueryClient` from `@tanstack/react-query`.
--- a/.gitignore
+++ b/.gitignore
@@ -61,8 +61,6 @@ expo-env.d.ts
 pc-api-7079014811501811218-719-3b9f15aeccf8.json
 credentials.json
 streamyfin-4fec1-firebase-adminsdk.json
-/profiles/
-certs/

 # Version and Backup Files
 /version-backup-*
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -1,39 +1,9 @@
 # CLAUDE.md

+@.claude/learned-facts.md
+
 This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

-## Learned Facts Index
-
-IMPORTANT: When encountering issues related to these topics, or when implementing new features that touch these areas, prefer retrieval-led reasoning -- read the relevant fact file in `.claude/learned-facts/` before relying on assumptions.
-
-Navigation:
- `native-bottom-tabs-userouter-conflict` | useRouter() at provider level causes tab switches; use static router import
- `introsheet-rendering-location` | IntroSheet in IntroSheetProvider affects native bottom tabs via nav state hooks
- `intro-modal-trigger-location` | Trigger in Home.tsx, not tabs _layout.tsx
- `tab-folder-naming` | Use underscore prefix: (_home) not (home)
-
-UI/Headers:
- `macos-header-buttons-fix` | macOS Catalyst: use RNGH Pressable, not RN TouchableOpacity
- `header-button-locations` | Defined in _layout.tsx, HeaderBackButton, Chromecast, RoundButton, etc.
- `stack-screen-header-configuration` | Sub-pages need explicit Stack.Screen with headerTransparent + back button
-
-State/Data:
- `use-network-aware-query-client-limitations` | Object.create breaks private fields; only for invalidateQueries
- `mark-as-played-flow` | PlayedStatus→useMarkAsPlayed→playbackManager with optimistic updates
-
-Native Modules:
- `mpv-tvos-player-exit-freeze` | mpv_terminate_destroy deadlocks main thread; use DispatchQueue.global()
- `mpv-avfoundation-composite-osd-ordering` | MUST follow vo=avfoundation, before hwdec options
- `thread-safe-state-for-stop-flags` | Stop flags need synchronous setter (stateQueue.sync not async)
- `native-swiftui-view-sizing` | Need explicit frame + intrinsicContentSize override in ExpoView
-
-TV Platform:
- `tv-modals-must-use-navigation-pattern` | Use atom+router.push(), never overlay/absolute modals
- `tv-grid-layout-pattern` | ScrollView+flexWrap, not FlatList numColumns
- `tv-horizontal-padding-standard` | TV_HORIZONTAL_PADDING=60, not old TV_SCALE_PADDING=20
- `streamystats-components-location` | components/home/Streamystats*.tv.tsx, watchlists/[watchlistId].tsx
- `platform-specific-file-suffix-does-not-work` | .tv.tsx doesn't work; use Platform.isTV conditional rendering
-
 ## Project Overview

 Streamyfin is a cross-platform Jellyfin video streaming client built with Expo (React Native). It supports mobile (iOS/Android) and TV platforms, with features including offline downloads, Chromecast support, and Jellyseerr integration.
@@ -95,7 +65,6 @@ bun run ios:install-metal-toolchain  # Fix "missing Metal Toolchain" build error
 **State Management**:
 - Global state uses Jotai atoms in `utils/atoms/`
 - `settingsAtom` in `utils/atoms/settings.ts` for app settings
-  - **IMPORTANT**: When adding a setting to the settings atom, ensure it's toggleable in the settings view (either TV or mobile, depending on the feature scope)
 - `apiAtom` and `userAtom` in `providers/JellyfinProvider.tsx` for auth state
 - Server state uses React Query with `@tanstack/react-query`

@@ -159,7 +128,6 @@ import { apiAtom } from "@/providers/JellyfinProvider";
 - Handle both mobile and TV navigation patterns
 - Use existing atoms, hooks, and utilities before creating new ones
 - Use Conventional Commits: `feat(scope):`, `fix(scope):`, `chore(scope):`
- **Translations**: When adding a translation key to a Text component, ensure the key exists in both `translations/en.json` and `translations/sv.json`. Before adding new keys, check if an existing key already covers the use case.

 ## Platform Considerations

@@ -170,13 +138,13 @@ import { apiAtom } from "@/providers/JellyfinProvider";
 - **TV Typography**: Use `TVTypography` from `@/components/tv/TVTypography` for all text on TV. It provides consistent font sizes optimized for TV viewing distance.
 - **TV Button Sizing**: Ensure buttons placed next to each other have the same size for visual consistency.
 - **TV Focus Scale Padding**: Add sufficient padding around focusable items in tables/rows/columns/lists. The focus scale animation (typically 1.05x) will clip against parent containers without proper padding. Use `overflow: "visible"` on containers and add padding to prevent clipping.
- **TV Modals**: Never use React Native's `Modal` component or overlay/absolute-positioned modals for full-screen modals on TV. Use the navigation-based modal pattern instead. **See [docs/tv-modal-guide.md](docs/tv-modal-guide.md) for detailed documentation.**
+- **TV Modals**: Never use overlay/absolute-positioned modals on TV as they don't handle the back button correctly. Instead, use the navigation-based modal pattern: create a Jotai atom for state, a hook that sets the atom and calls `router.push()`, and a page file in `app/(auth)/` that reads the atom and clears it on unmount. You must also add a `Stack.Screen` entry in `app/_layout.tsx` with `presentation: "transparentModal"` and `animation: "fade"` for the modal to render correctly as an overlay. See `useTVRequestModal` + `tv-request-modal.tsx` for reference.

 ### TV Component Rendering Pattern

-**IMPORTANT**: The `.tv.tsx` file suffix does NOT work in this project - neither for pages nor components. Metro bundler doesn't resolve platform-specific suffixes. Always use `Platform.isTV` conditional rendering instead.
+**IMPORTANT**: The `.tv.tsx` file suffix only works for **pages** in the `app/` directory (resolved by Expo Router). It does NOT work for components - Metro bundler doesn't resolve platform-specific suffixes for component imports.

-**Pattern for TV-specific pages and components**:
+**Pattern for TV-specific components**:
 ```typescript
 // In page file (e.g., app/login.tsx)
 import { Platform } from "react-native";
@@ -196,11 +164,99 @@ export default LoginPage;
 - Create separate component files for mobile and TV (e.g., `MyComponent.tsx` and `TVMyComponent.tsx`)
 - Use `Platform.isTV` to conditionally render the appropriate component
 - TV components typically use `TVInput`, `TVServerCard`, and other TV-prefixed components with focus handling
- **Never use `.tv.tsx` file suffix** - it will not be resolved correctly

-### TV Option Selectors and Focus Management
+### TV Option Selector Pattern (Dropdowns/Multi-select)

-For dropdown/select components, bottom sheets, and overlay focus management on TV, see [docs/tv-modal-guide.md](docs/tv-modal-guide.md).
+For dropdown/select components on TV, use a **bottom sheet with horizontal scrolling**. This pattern is ideal for TV because:
+- Horizontal scrolling is natural for TV remotes (left/right D-pad)
+- Bottom sheet takes minimal screen space
+- Focus-based navigation works reliably
+
+**Key implementation details:**
+
+1. **Use absolute positioning instead of Modal** - React Native's `Modal` breaks the TV focus chain. Use an absolutely positioned `View` overlay instead:
+```typescript
+<View style={{
+  position: "absolute",
+  top: 0, left: 0, right: 0, bottom: 0,
+  backgroundColor: "rgba(0, 0, 0, 0.5)",
+  justifyContent: "flex-end",
+  zIndex: 1000,
+}}>
+  <BlurView intensity={80} tint="dark" style={{ borderTopLeftRadius: 24, borderTopRightRadius: 24 }}>
+    {/* Content */}
+  </BlurView>
+</View>
+```
+
+2. **Horizontal ScrollView with focusable cards**:
+```typescript
+<ScrollView
+  horizontal
+  showsHorizontalScrollIndicator={false}
+  style={{ overflow: "visible" }}
+  contentContainerStyle={{ paddingHorizontal: 48, paddingVertical: 10, gap: 12 }}
+>
+  {options.map((option, index) => (
+    <TVOptionCard
+      key={index}
+      hasTVPreferredFocus={index === selectedIndex}
+      onPress={() => { onSelect(option.value); onClose(); }}
+      // ...
+    />
+  ))}
+</ScrollView>
+```
+
+3. **Focus handling on cards** - Use `Pressable` with `onFocus`/`onBlur` and `hasTVPreferredFocus`:
+```typescript
+<Pressable
+  onPress={onPress}
+  onFocus={() => { setFocused(true); animateTo(1.05); }}
+  onBlur={() => { setFocused(false); animateTo(1); }}
+  hasTVPreferredFocus={hasTVPreferredFocus}
+>
+  <Animated.View style={{ transform: [{ scale }], backgroundColor: focused ? "#fff" : "rgba(255,255,255,0.08)" }}>
+    <Text style={{ color: focused ? "#000" : "#fff" }}>{label}</Text>
+  </Animated.View>
+</Pressable>
+```
+
+4. **Add padding for scale animations** - When items scale on focus, add enough padding (`overflow: "visible"` + `paddingVertical`) so scaled items don't clip.
+
+**Reference implementation**: See `TVOptionSelector` and `TVOptionCard` in `components/ItemContent.tv.tsx`
+
+### TV Focus Management for Overlays/Modals
+
+**CRITICAL**: When displaying overlays (bottom sheets, modals, dialogs) on TV, you must explicitly disable focus on all background elements. Without this, the TV focus engine will rapidly switch between overlay and background elements, causing a focus loop that freezes navigation.
+
+**Solution**: Add a `disabled` prop to every focusable component and pass `disabled={isModalOpen}` when an overlay is visible:
+
+```typescript
+// 1. Track modal state
+const [openModal, setOpenModal] = useState<ModalType | null>(null);
+const isModalOpen = openModal !== null;
+
+// 2. Each focusable component accepts disabled prop
+const TVFocusableButton: React.FC<{
+  onPress: () => void;
+  disabled?: boolean;
+}> = ({ onPress, disabled }) => (
+  <Pressable
+    onPress={onPress}
+    disabled={disabled}
+    focusable={!disabled}
+    hasTVPreferredFocus={isFirst && !disabled}
+  >
+    {/* content */}
+  </Pressable>
+);
+
+// 3. Pass disabled to all background components when modal is open
+<TVFocusableButton onPress={handlePress} disabled={isModalOpen} />
+```
+
+**Reference implementation**: See `settings.tv.tsx` for complete example with `TVSettingsOptionButton`, `TVSettingsToggle`, `TVSettingsStepper`, etc.

 ### TV Focus Flickering Between Zones (Lists with Headers)

--- a/app.json
+++ b/app.json
@@ -76,7 +76,6 @@
      "expo-router",
      "expo-font",
      "./plugins/withExcludeMedia3Dash.js",
-      "./plugins/withTVUserManagement.js",
      [
        "expo-build-properties",
        {
--- a/app/(auth)/(tabs)/(home)/settings.tv.tsx
+++ b/app/(auth)/(tabs)/(home)/settings.tv.tsx
@@ -2,11 +2,9 @@ import { SubtitlePlaybackMode } from "@jellyfin/sdk/lib/generated-client";
 import { useAtom } from "jotai";
 import { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Alert, ScrollView, View } from "react-native";
+import { ScrollView, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Text } from "@/components/common/Text";
-import { TVPasswordEntryModal } from "@/components/login/TVPasswordEntryModal";
-import { TVPINEntryModal } from "@/components/login/TVPINEntryModal";
 import type { TVOptionItem } from "@/components/tv";
 import {
  TVLogoutButton,
@@ -19,31 +17,21 @@ import {
 } from "@/components/tv";
 import { useScaledTVTypography } from "@/constants/TVTypography";
 import { useTVOptionModal } from "@/hooks/useTVOptionModal";
-import { useTVUserSwitchModal } from "@/hooks/useTVUserSwitchModal";
-import { APP_LANGUAGES } from "@/i18n";
 import { apiAtom, useJellyfin, userAtom } from "@/providers/JellyfinProvider";
 import {
  AudioTranscodeMode,
-  InactivityTimeout,
-  type MpvCacheMode,
  TVTypographyScale,
  useSettings,
 } from "@/utils/atoms/settings";
-import {
-  getPreviousServers,
-  type SavedServer,
-  type SavedServerAccount,
-} from "@/utils/secureCredentials";

 export default function SettingsTV() {
  const { t } = useTranslation();
  const insets = useSafeAreaInsets();
  const { settings, updateSettings } = useSettings();
-  const { logout, loginWithSavedCredential, loginWithPassword } = useJellyfin();
+  const { logout } = useJellyfin();
  const [user] = useAtom(userAtom);
  const [api] = useAtom(apiAtom);
  const { showOptions } = useTVOptionModal();
-  const { showUserSwitchModal } = useTVUserSwitchModal();
  const typography = useScaledTVTypography();

  // Local state for OpenSubtitles API key (only commit on blur)
@@ -51,117 +39,6 @@ export default function SettingsTV() {
    settings.openSubtitlesApiKey || "",
  );

-  // PIN/Password modal state for user switching
-  const [pinModalVisible, setPinModalVisible] = useState(false);
-  const [passwordModalVisible, setPasswordModalVisible] = useState(false);
-  const [selectedServer, setSelectedServer] = useState<SavedServer | null>(
-    null,
-  );
-  const [selectedAccount, setSelectedAccount] =
-    useState<SavedServerAccount | null>(null);
-
-  // Track if any modal is open to disable background focus
-  const isAnyModalOpen = pinModalVisible || passwordModalVisible;
-
-  // Get current server and other accounts
-  const currentServer = useMemo(() => {
-    if (!api?.basePath) return null;
-    const servers = getPreviousServers();
-    return servers.find((s) => s.address === api.basePath) || null;
-  }, [api?.basePath]);
-
-  const otherAccounts = useMemo(() => {
-    if (!currentServer || !user?.Id) return [];
-    return currentServer.accounts.filter(
-      (account) => account.userId !== user.Id,
-    );
-  }, [currentServer, user?.Id]);
-
-  const hasOtherAccounts = otherAccounts.length > 0;
-
-  // Handle account selection from modal
-  const handleAccountSelect = async (account: SavedServerAccount) => {
-    if (!currentServer) return;
-
-    if (account.securityType === "none") {
-      // Direct login with saved credential
-      try {
-        await loginWithSavedCredential(currentServer.address, account.userId);
-      } catch (error) {
-        const errorMessage =
-          error instanceof Error ? error.message : t("server.session_expired");
-        const isSessionExpired = errorMessage.includes(
-          t("server.session_expired"),
-        );
-        Alert.alert(
-          isSessionExpired
-            ? t("server.session_expired")
-            : t("login.connection_failed"),
-          isSessionExpired ? t("server.please_login_again") : errorMessage,
-        );
-      }
-    } else if (account.securityType === "pin") {
-      // Show PIN modal
-      setSelectedServer(currentServer);
-      setSelectedAccount(account);
-      setPinModalVisible(true);
-    } else if (account.securityType === "password") {
-      // Show password modal
-      setSelectedServer(currentServer);
-      setSelectedAccount(account);
-      setPasswordModalVisible(true);
-    }
-  };
-
-  // Handle successful PIN entry
-  const handlePinSuccess = async () => {
-    setPinModalVisible(false);
-    if (selectedServer && selectedAccount) {
-      try {
-        await loginWithSavedCredential(
-          selectedServer.address,
-          selectedAccount.userId,
-        );
-      } catch (error) {
-        const errorMessage =
-          error instanceof Error ? error.message : t("server.session_expired");
-        const isSessionExpired = errorMessage.includes(
-          t("server.session_expired"),
-        );
-        Alert.alert(
-          isSessionExpired
-            ? t("server.session_expired")
-            : t("login.connection_failed"),
-          isSessionExpired ? t("server.please_login_again") : errorMessage,
-        );
-      }
-    }
-    setSelectedServer(null);
-    setSelectedAccount(null);
-  };
-
-  // Handle password submission
-  const handlePasswordSubmit = async (password: string) => {
-    if (selectedServer && selectedAccount) {
-      await loginWithPassword(
-        selectedServer.address,
-        selectedAccount.username,
-        password,
-      );
-    }
-    setPasswordModalVisible(false);
-    setSelectedServer(null);
-    setSelectedAccount(null);
-  };
-
-  // Handle switch user button press
-  const handleSwitchUser = () => {
-    if (!currentServer || !user?.Id) return;
-    showUserSwitchModal(currentServer, user.Id, {
-      onAccountSelect: handleAccountSelect,
-    });
-  };
-
  const currentAudioTranscode =
    settings.audioTranscodeMode || AudioTranscodeMode.Auto;
  const currentSubtitleMode =
@@ -170,8 +47,6 @@ export default function SettingsTV() {
  const currentAlignY = settings.mpvSubtitleAlignY ?? "bottom";
  const currentTypographyScale =
    settings.tvTypographyScale || TVTypographyScale.Default;
-  const currentCacheMode = settings.mpvCacheEnabled ?? "auto";
-  const currentLanguage = settings.preferedLanguage;

  // Audio transcoding options
  const audioTranscodeModeOptions: TVOptionItem<AudioTranscodeMode>[] = useMemo(
@@ -263,48 +138,26 @@ export default function SettingsTV() {
    [currentAlignY],
  );

-  // Cache mode options
-  const cacheModeOptions: TVOptionItem<MpvCacheMode>[] = useMemo(
-    () => [
-      {
-        label: t("home.settings.buffer.cache_auto"),
-        value: "auto",
-        selected: currentCacheMode === "auto",
-      },
-      {
-        label: t("home.settings.buffer.cache_yes"),
-        value: "yes",
-        selected: currentCacheMode === "yes",
-      },
-      {
-        label: t("home.settings.buffer.cache_no"),
-        value: "no",
-        selected: currentCacheMode === "no",
-      },
-    ],
-    [t, currentCacheMode],
-  );
-
  // Typography scale options
  const typographyScaleOptions: TVOptionItem<TVTypographyScale>[] = useMemo(
    () => [
      {
-        label: t("home.settings.appearance.display_size_small"),
+        label: t("home.settings.appearance.text_size_small"),
        value: TVTypographyScale.Small,
        selected: currentTypographyScale === TVTypographyScale.Small,
      },
      {
-        label: t("home.settings.appearance.display_size_default"),
+        label: t("home.settings.appearance.text_size_default"),
        value: TVTypographyScale.Default,
        selected: currentTypographyScale === TVTypographyScale.Default,
      },
      {
-        label: t("home.settings.appearance.display_size_large"),
+        label: t("home.settings.appearance.text_size_large"),
        value: TVTypographyScale.Large,
        selected: currentTypographyScale === TVTypographyScale.Large,
      },
      {
-        label: t("home.settings.appearance.display_size_extra_large"),
+        label: t("home.settings.appearance.text_size_extra_large"),
        value: TVTypographyScale.ExtraLarge,
        selected: currentTypographyScale === TVTypographyScale.ExtraLarge,
      },
@@ -312,74 +165,6 @@ export default function SettingsTV() {
    [t, currentTypographyScale],
  );

-  // Language options
-  const languageOptions: TVOptionItem<string | undefined>[] = useMemo(
-    () => [
-      {
-        label: t("home.settings.languages.system"),
-        value: undefined,
-        selected: !currentLanguage,
-      },
-      ...APP_LANGUAGES.map((lang) => ({
-        label: lang.label,
-        value: lang.value,
-        selected: currentLanguage === lang.value,
-      })),
-    ],
-    [t, currentLanguage],
-  );
-
-  // Inactivity timeout options (TV security feature)
-  const currentInactivityTimeout =
-    settings.inactivityTimeout ?? InactivityTimeout.Disabled;
-
-  const inactivityTimeoutOptions: TVOptionItem<InactivityTimeout>[] = useMemo(
-    () => [
-      {
-        label: t("home.settings.security.inactivity_timeout.disabled"),
-        value: InactivityTimeout.Disabled,
-        selected: currentInactivityTimeout === InactivityTimeout.Disabled,
-      },
-      {
-        label: t("home.settings.security.inactivity_timeout.1_minute"),
-        value: InactivityTimeout.OneMinute,
-        selected: currentInactivityTimeout === InactivityTimeout.OneMinute,
-      },
-      {
-        label: t("home.settings.security.inactivity_timeout.5_minutes"),
-        value: InactivityTimeout.FiveMinutes,
-        selected: currentInactivityTimeout === InactivityTimeout.FiveMinutes,
-      },
-      {
-        label: t("home.settings.security.inactivity_timeout.15_minutes"),
-        value: InactivityTimeout.FifteenMinutes,
-        selected: currentInactivityTimeout === InactivityTimeout.FifteenMinutes,
-      },
-      {
-        label: t("home.settings.security.inactivity_timeout.30_minutes"),
-        value: InactivityTimeout.ThirtyMinutes,
-        selected: currentInactivityTimeout === InactivityTimeout.ThirtyMinutes,
-      },
-      {
-        label: t("home.settings.security.inactivity_timeout.1_hour"),
-        value: InactivityTimeout.OneHour,
-        selected: currentInactivityTimeout === InactivityTimeout.OneHour,
-      },
-      {
-        label: t("home.settings.security.inactivity_timeout.4_hours"),
-        value: InactivityTimeout.FourHours,
-        selected: currentInactivityTimeout === InactivityTimeout.FourHours,
-      },
-      {
-        label: t("home.settings.security.inactivity_timeout.24_hours"),
-        value: InactivityTimeout.TwentyFourHours,
-        selected:
-          currentInactivityTimeout === InactivityTimeout.TwentyFourHours,
-      },
-    ],
-    [t, currentInactivityTimeout],
-  );
-
  // Get display labels for option buttons
  const audioTranscodeLabel = useMemo(() => {
    const option = audioTranscodeModeOptions.find((o) => o.selected);
@@ -403,27 +188,9 @@ export default function SettingsTV() {

  const typographyScaleLabel = useMemo(() => {
    const option = typographyScaleOptions.find((o) => o.selected);
-    return option?.label || t("home.settings.appearance.display_size_default");
+    return option?.label || t("home.settings.appearance.text_size_default");
  }, [typographyScaleOptions, t]);

-  const cacheModeLabel = useMemo(() => {
-    const option = cacheModeOptions.find((o) => o.selected);
-    return option?.label || t("home.settings.buffer.cache_auto");
-  }, [cacheModeOptions, t]);
-
-  const languageLabel = useMemo(() => {
-    if (!currentLanguage) return t("home.settings.languages.system");
-    const option = APP_LANGUAGES.find((l) => l.value === currentLanguage);
-    return option?.label || t("home.settings.languages.system");
-  }, [currentLanguage, t]);
-
-  const inactivityTimeoutLabel = useMemo(() => {
-    const option = inactivityTimeoutOptions.find((o) => o.selected);
-    return (
-      option?.label || t("home.settings.security.inactivity_timeout.disabled")
-    );
-  }, [inactivityTimeoutOptions, t]);
-
  return (
    <View style={{ flex: 1, backgroundColor: "#000000" }}>
      <View style={{ flex: 1 }}>
@@ -448,31 +215,6 @@ export default function SettingsTV() {
            {t("home.settings.settings_title")}
          </Text>

-          {/* Account Section */}
-          <TVSectionHeader title={t("home.settings.switch_user.account")} />
-          <TVSettingsOptionButton
-            label={t("home.settings.switch_user.switch_user")}
-            value={user?.Name || "-"}
-            onPress={handleSwitchUser}
-            disabled={!hasOtherAccounts || isAnyModalOpen}
-            isFirst
-          />
-
-          {/* Security Section */}
-          <TVSectionHeader title={t("home.settings.security.title")} />
-          <TVSettingsOptionButton
-            label={t("home.settings.security.inactivity_timeout.title")}
-            value={inactivityTimeoutLabel}
-            onPress={() =>
-              showOptions({
-                title: t("home.settings.security.inactivity_timeout.title"),
-                options: inactivityTimeoutOptions,
-                onSelect: (value) =>
-                  updateSettings({ inactivityTimeout: value }),
-              })
-            }
-          />
-
          {/* Audio Section */}
          <TVSectionHeader title={t("home.settings.audio.audio_title")} />
          <TVSettingsOptionButton
@@ -486,6 +228,7 @@ export default function SettingsTV() {
                  updateSettings({ audioTranscodeMode: value }),
              })
            }
+            isFirst
          />

          {/* Subtitles Section */}
@@ -512,10 +255,26 @@ export default function SettingsTV() {
          />
          <TVSettingsStepper
            label={t("home.settings.subtitles.subtitle_size")}
+            value={settings.subtitleSize / 100}
+            onDecrease={() => {
+              const newValue = Math.max(0.3, settings.subtitleSize / 100 - 0.1);
+              updateSettings({ subtitleSize: Math.round(newValue * 100) });
+            }}
+            onIncrease={() => {
+              const newValue = Math.min(1.5, settings.subtitleSize / 100 + 0.1);
+              updateSettings({ subtitleSize: Math.round(newValue * 100) });
+            }}
+            formatValue={(v) => `${v.toFixed(1)}x`}
+          />
+
+          {/* MPV Subtitles Section */}
+          <TVSectionHeader title='MPV Subtitle Settings' />
+          <TVSettingsStepper
+            label='Subtitle Scale'
            value={settings.mpvSubtitleScale ?? 1.0}
            onDecrease={() => {
              const newValue = Math.max(
-                0.1,
+                0.5,
                (settings.mpvSubtitleScale ?? 1.0) - 0.1,
              );
              updateSettings({
@@ -524,7 +283,7 @@ export default function SettingsTV() {
            }}
            onIncrease={() => {
              const newValue = Math.min(
-                3.0,
+                2.0,
                (settings.mpvSubtitleScale ?? 1.0) + 0.1,
              );
              updateSettings({
@@ -623,103 +382,20 @@ export default function SettingsTV() {
              "Get your free API key at opensubtitles.com/en/consumers"}
          </Text>

-          {/* Buffer Settings Section */}
-          <TVSectionHeader title={t("home.settings.buffer.title")} />
-          <TVSettingsOptionButton
-            label={t("home.settings.buffer.cache_mode")}
-            value={cacheModeLabel}
-            onPress={() =>
-              showOptions({
-                title: t("home.settings.buffer.cache_mode"),
-                options: cacheModeOptions,
-                onSelect: (value) => updateSettings({ mpvCacheEnabled: value }),
-              })
-            }
-          />
-          <TVSettingsStepper
-            label={t("home.settings.buffer.buffer_duration")}
-            value={settings.mpvCacheSeconds ?? 10}
-            onDecrease={() => {
-              const newValue = Math.max(
-                5,
-                (settings.mpvCacheSeconds ?? 10) - 5,
-              );
-              updateSettings({ mpvCacheSeconds: newValue });
-            }}
-            onIncrease={() => {
-              const newValue = Math.min(
-                120,
-                (settings.mpvCacheSeconds ?? 10) + 5,
-              );
-              updateSettings({ mpvCacheSeconds: newValue });
-            }}
-            formatValue={(v) => `${v}s`}
-          />
-          <TVSettingsStepper
-            label={t("home.settings.buffer.max_cache_size")}
-            value={settings.mpvDemuxerMaxBytes ?? 150}
-            onDecrease={() => {
-              const newValue = Math.max(
-                50,
-                (settings.mpvDemuxerMaxBytes ?? 150) - 25,
-              );
-              updateSettings({ mpvDemuxerMaxBytes: newValue });
-            }}
-            onIncrease={() => {
-              const newValue = Math.min(
-                500,
-                (settings.mpvDemuxerMaxBytes ?? 150) + 25,
-              );
-              updateSettings({ mpvDemuxerMaxBytes: newValue });
-            }}
-            formatValue={(v) => `${v} MB`}
-          />
-          <TVSettingsStepper
-            label={t("home.settings.buffer.max_backward_cache")}
-            value={settings.mpvDemuxerMaxBackBytes ?? 50}
-            onDecrease={() => {
-              const newValue = Math.max(
-                25,
-                (settings.mpvDemuxerMaxBackBytes ?? 50) - 25,
-              );
-              updateSettings({ mpvDemuxerMaxBackBytes: newValue });
-            }}
-            onIncrease={() => {
-              const newValue = Math.min(
-                200,
-                (settings.mpvDemuxerMaxBackBytes ?? 50) + 25,
-              );
-              updateSettings({ mpvDemuxerMaxBackBytes: newValue });
-            }}
-            formatValue={(v) => `${v} MB`}
-          />
-
          {/* Appearance Section */}
          <TVSectionHeader title={t("home.settings.appearance.title")} />
          <TVSettingsOptionButton
-            label={t("home.settings.appearance.display_size")}
+            label={t("home.settings.appearance.text_size")}
            value={typographyScaleLabel}
            onPress={() =>
              showOptions({
-                title: t("home.settings.appearance.display_size"),
+                title: t("home.settings.appearance.text_size"),
                options: typographyScaleOptions,
                onSelect: (value) =>
                  updateSettings({ tvTypographyScale: value }),
              })
            }
          />
-          <TVSettingsOptionButton
-            label={t("home.settings.languages.app_language")}
-            value={languageLabel}
-            onPress={() =>
-              showOptions({
-                title: t("home.settings.languages.app_language"),
-                options: languageOptions,
-                onSelect: (value) =>
-                  updateSettings({ preferedLanguage: value }),
-              })
-            }
-          />
          <TVSettingsToggle
            label={t(
              "home.settings.appearance.merge_next_up_continue_watching",
@@ -746,11 +422,6 @@ export default function SettingsTV() {
              updateSettings({ showSeriesPosterOnEpisode: value })
            }
          />
-          <TVSettingsToggle
-            label={t("home.settings.appearance.theme_music")}
-            value={settings.tvThemeMusicEnabled}
-            onToggle={(value) => updateSettings({ tvThemeMusicEnabled: value })}
-          />

          {/* User Section */}
          <TVSectionHeader
@@ -773,37 +444,6 @@ export default function SettingsTV() {
          </View>
        </ScrollView>
      </View>
-
-      {/* PIN Entry Modal */}
-      <TVPINEntryModal
-        visible={pinModalVisible}
-        onClose={() => {
-          setPinModalVisible(false);
-          setSelectedAccount(null);
-          setSelectedServer(null);
-        }}
-        onSuccess={handlePinSuccess}
-        onForgotPIN={() => {
-          setPinModalVisible(false);
-          setSelectedAccount(null);
-          setSelectedServer(null);
-        }}
-        serverUrl={selectedServer?.address || ""}
-        userId={selectedAccount?.userId || ""}
-        username={selectedAccount?.username || ""}
-      />
-
-      {/* Password Entry Modal */}
-      <TVPasswordEntryModal
-        visible={passwordModalVisible}
-        onClose={() => {
-          setPasswordModalVisible(false);
-          setSelectedAccount(null);
-          setSelectedServer(null);
-        }}
-        onSubmit={handlePasswordSubmit}
-        username={selectedAccount?.username || ""}
-      />
    </View>
  );
 }
--- a/app/(auth)/(tabs)/(home)/settings/playback-controls/page.tsx
+++ b/app/(auth)/(tabs)/(home)/settings/playback-controls/page.tsx
@@ -3,7 +3,6 @@ import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { GestureControls } from "@/components/settings/GestureControls";
 import { MediaProvider } from "@/components/settings/MediaContext";
 import { MediaToggles } from "@/components/settings/MediaToggles";
-import { MpvBufferSettings } from "@/components/settings/MpvBufferSettings";
 import { PlaybackControlsSettings } from "@/components/settings/PlaybackControlsSettings";
 import { ChromecastSettings } from "../../../../../../components/settings/ChromecastSettings";

@@ -27,7 +26,6 @@ export default function PlaybackControlsPage() {
            <MediaToggles className='mb-4' />
            <GestureControls className='mb-4' />
            <PlaybackControlsSettings />
-            <MpvBufferSettings />
          </MediaProvider>
        </View>
        {!Platform.isTV && <ChromecastSettings />}
--- a/app/(auth)/(tabs)/(home,libraries,search,favorites,watchlists)/collections/[collectionId].tsx
+++ b/app/(auth)/(tabs)/(home,libraries,search,favorites,watchlists)/collections/[collectionId].tsx
@@ -27,11 +27,16 @@ import { ResetFiltersButton } from "@/components/filters/ResetFiltersButton";
 import { ItemCardText } from "@/components/ItemCardText";
 import { Loader } from "@/components/Loader";
 import { ItemPoster } from "@/components/posters/ItemPoster";
-import { TVFilterButton } from "@/components/tv";
-import { TVPosterCard } from "@/components/tv/TVPosterCard";
-import { useScaledTVPosterSizes } from "@/constants/TVPosterSizes";
+import MoviePoster, {
+  TV_POSTER_WIDTH,
+} from "@/components/posters/MoviePoster.tv";
+import SeriesPoster from "@/components/posters/SeriesPoster.tv";
+import {
+  TVFilterButton,
+  TVFocusablePoster,
+  TVItemCardText,
+} from "@/components/tv";
 import useRouter from "@/hooks/useAppRouter";
-import { useTVItemActionModal } from "@/hooks/useTVItemActionModal";
 import { useTVOptionModal } from "@/hooks/useTVOptionModal";
 import * as ScreenOrientation from "@/packages/expo-screen-orientation";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
@@ -55,13 +60,11 @@ const page: React.FC = () => {
  const searchParams = useLocalSearchParams();
  const { collectionId } = searchParams as { collectionId: string };

-  const posterSizes = useScaledTVPosterSizes();
  const [api] = useAtom(apiAtom);
  const [user] = useAtom(userAtom);
  const navigation = useNavigation();
  const router = useRouter();
  const { showOptions } = useTVOptionModal();
-  const { showItemActions } = useTVItemActionModal();
  const { width: screenWidth } = useWindowDimensions();
  const [orientation, _setOrientation] = useState(
    ScreenOrientation.Orientation.PORTRAIT_UP,
@@ -150,7 +153,7 @@ const page: React.FC = () => {
  // Calculate columns for TV grid
  const nrOfCols = useMemo(() => {
    if (Platform.isTV) {
-      const itemWidth = posterSizes.poster + TV_ITEM_GAP;
+      const itemWidth = TV_POSTER_WIDTH + TV_ITEM_GAP;
      return Math.max(
        1,
        Math.floor((screenWidth - TV_SCALE_PADDING * 2) / itemWidth),
@@ -288,19 +291,23 @@ const page: React.FC = () => {
          style={{
            marginRight: TV_ITEM_GAP,
            marginBottom: TV_ITEM_GAP,
+            width: TV_POSTER_WIDTH,
          }}
        >
-          <TVPosterCard
-            item={item}
-            orientation='vertical'
-            onPress={handlePress}
-            onLongPress={() => showItemActions(item)}
-            width={posterSizes.poster}
-          />
+          <TVFocusablePoster onPress={handlePress}>
+            {item.Type === "Movie" && <MoviePoster item={item} />}
+            {(item.Type === "Series" || item.Type === "Episode") && (
+              <SeriesPoster item={item} />
+            )}
+            {item.Type !== "Movie" &&
+              item.Type !== "Series" &&
+              item.Type !== "Episode" && <MoviePoster item={item} />}
+          </TVFocusablePoster>
+          <TVItemCardText item={item} />
        </View>
      );
    },
-    [router, showItemActions, posterSizes.poster],
+    [router],
  );

  const keyExtractor = useCallback((item: BaseItemDto) => item.Id || "", []);
--- a/app/(auth)/(tabs)/(home,libraries,search,favorites,watchlists)/livetv/_layout.tsx
+++ b/app/(auth)/(tabs)/(home,libraries,search,favorites,watchlists)/livetv/_layout.tsx
@@ -7,8 +7,7 @@ import type {
  ParamListBase,
  TabNavigationState,
 } from "@react-navigation/native";
-import { Slot, Stack, withLayoutContext } from "expo-router";
-import { Platform } from "react-native";
+import { Stack, withLayoutContext } from "expo-router";

 const { Navigator } = createMaterialTopTabNavigator();

@@ -20,17 +19,6 @@ export const Tab = withLayoutContext<
 >(Navigator);

 const Layout = () => {
-  // On TV, skip the Material Top Tab Navigator and render children directly
-  // The TV version handles its own tab navigation internally
-  if (Platform.isTV) {
-    return (
-      <>
-        <Stack.Screen options={{ headerShown: false }} />
-        <Slot />
-      </>
-    );
-  }
-
  return (
    <>
      <Stack.Screen options={{ title: "Live TV" }} />
--- a/app/(auth)/(tabs)/(home,libraries,search,favorites,watchlists)/livetv/programs.tsx
+++ b/app/(auth)/(tabs)/(home,libraries,search,favorites,watchlists)/livetv/programs.tsx
@@ -2,21 +2,12 @@ import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
 import { getLiveTvApi } from "@jellyfin/sdk/lib/utils/api";
 import { useAtom } from "jotai";
 import { useTranslation } from "react-i18next";
-import { Platform, ScrollView, View } from "react-native";
+import { ScrollView, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { ScrollingCollectionList } from "@/components/home/ScrollingCollectionList";
-import { TVLiveTVPage } from "@/components/livetv/TVLiveTVPage";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";

 export default function page() {
-  if (Platform.isTV) {
-    return <TVLiveTVPage />;
-  }
-
-  return <MobileLiveTVPrograms />;
-}
-
-function MobileLiveTVPrograms() {
  const [api] = useAtom(apiAtom);
  const [user] = useAtom(userAtom);
  const insets = useSafeAreaInsets();
--- a/app/(auth)/(tabs)/(libraries)/[libraryId].tsx
+++ b/app/(auth)/(tabs)/(libraries)/[libraryId].tsx
@@ -11,7 +11,6 @@ import {
 } from "@jellyfin/sdk/lib/utils/api";
 import { FlashList } from "@shopify/flash-list";
 import { useInfiniteQuery, useQuery } from "@tanstack/react-query";
-import { Image } from "expo-image";
 import { useLocalSearchParams, useNavigation } from "expo-router";
 import { useAtom } from "jotai";
 import React, { useCallback, useEffect, useMemo } from "react";
@@ -34,13 +33,18 @@ import { ResetFiltersButton } from "@/components/filters/ResetFiltersButton";
 import { ItemCardText } from "@/components/ItemCardText";
 import { Loader } from "@/components/Loader";
 import { ItemPoster } from "@/components/posters/ItemPoster";
-import { TVFilterButton, TVFocusablePoster } from "@/components/tv";
-import { TVPosterCard } from "@/components/tv/TVPosterCard";
-import { useScaledTVPosterSizes } from "@/constants/TVPosterSizes";
+import MoviePoster, {
+  TV_POSTER_WIDTH,
+} from "@/components/posters/MoviePoster.tv";
+import SeriesPoster from "@/components/posters/SeriesPoster.tv";
+import {
+  TVFilterButton,
+  TVFocusablePoster,
+  TVItemCardText,
+} from "@/components/tv";
 import { useScaledTVTypography } from "@/constants/TVTypography";
 import useRouter from "@/hooks/useAppRouter";
 import { useOrientation } from "@/hooks/useOrientation";
-import { useTVItemActionModal } from "@/hooks/useTVItemActionModal";
 import { useTVOptionModal } from "@/hooks/useTVOptionModal";
 import * as ScreenOrientation from "@/packages/expo-screen-orientation";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
@@ -66,12 +70,10 @@ import {
 } from "@/utils/atoms/filters";
 import { useSettings } from "@/utils/atoms/settings";
 import type { TVOptionItem } from "@/utils/atoms/tvOptionModal";
-import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";

 const TV_ITEM_GAP = 20;
 const TV_HORIZONTAL_PADDING = 60;
 const _TV_SCALE_PADDING = 20;
-const TV_PLAYLIST_SQUARE_SIZE = 180;

 const Page = () => {
  const searchParams = useLocalSearchParams() as {
@@ -83,7 +85,6 @@ const Page = () => {
  const { libraryId } = searchParams;

  const typography = useScaledTVTypography();
-  const posterSizes = useScaledTVPosterSizes();
  const [api] = useAtom(apiAtom);
  const [user] = useAtom(userAtom);
  const { width: screenWidth } = useWindowDimensions();
@@ -107,7 +108,6 @@ const Page = () => {
  const { t } = useTranslation();
  const router = useRouter();
  const { showOptions } = useTVOptionModal();
-  const { showItemActions } = useTVItemActionModal();

  // TV Filter queries
  const { data: tvGenreOptions } = useQuery({
@@ -286,8 +286,6 @@ const Page = () => {
        itemType = "Video";
      } else if (library.CollectionType === "musicvideos") {
        itemType = "MusicVideo";
-      } else if (library.CollectionType === "playlists") {
-        itemType = "Playlist";
      }

      const response = await getItemsApi(api).getItems({
@@ -307,9 +305,6 @@ const Page = () => {
        tags: selectedTags,
        years: selectedYears.map((year) => Number.parseInt(year, 10)),
        includeItemTypes: itemType ? [itemType] : undefined,
-        ...(Platform.isTV && library.CollectionType === "playlists"
-          ? { mediaTypes: ["Video"] }
-          : {}),
      });

      return response.data || null;
@@ -406,82 +401,31 @@ const Page = () => {
  const renderTVItem = useCallback(
    (item: BaseItemDto) => {
      const handlePress = () => {
-        if (item.Type === "Playlist") {
-          router.push({
-            pathname: "/(auth)/(tabs)/(libraries)/[libraryId]",
-            params: { libraryId: item.Id! },
-          });
-          return;
-        }
        const navTarget = getItemNavigation(item, "(libraries)");
        router.push(navTarget as any);
      };

-      // Special rendering for Playlist items (square thumbnails)
-      if (item.Type === "Playlist") {
-        const playlistImageUrl = getPrimaryImageUrl({
-          api,
-          item,
-          width: TV_PLAYLIST_SQUARE_SIZE * 2,
-        });
-
-        return (
-          <View
-            key={item.Id}
-            style={{
-              width: TV_PLAYLIST_SQUARE_SIZE,
-              alignItems: "center",
-            }}
-          >
-            <TVFocusablePoster
-              onPress={handlePress}
-              onLongPress={() => showItemActions(item)}
-            >
-              <View
-                style={{
-                  width: TV_PLAYLIST_SQUARE_SIZE,
-                  aspectRatio: 1,
-                  borderRadius: 16,
-                  overflow: "hidden",
-                  backgroundColor: "#1a1a1a",
-                }}
-              >
-                <Image
-                  source={playlistImageUrl ? { uri: playlistImageUrl } : null}
-                  style={{ width: "100%", height: "100%" }}
-                  contentFit='cover'
-                  cachePolicy='memory-disk'
-                />
-              </View>
-            </TVFocusablePoster>
-            <View style={{ marginTop: 12, alignItems: "center" }}>
-              <Text
-                numberOfLines={1}
-                style={{
-                  fontSize: typography.callout,
-                  color: "#FFFFFF",
-                  textAlign: "center",
-                }}
-              >
-                {item.Name}
-              </Text>
-            </View>
-          </View>
-        );
-      }
-
      return (
-        <TVPosterCard
+        <View
          key={item.Id}
-          item={item}
-          orientation='vertical'
-          onPress={handlePress}
-          onLongPress={() => showItemActions(item)}
-          width={posterSizes.poster}
-        />
+          style={{
+            width: TV_POSTER_WIDTH,
+          }}
+        >
+          <TVFocusablePoster onPress={handlePress}>
+            {item.Type === "Movie" && <MoviePoster item={item} />}
+            {(item.Type === "Series" || item.Type === "Episode") && (
+              <SeriesPoster item={item} />
+            )}
+            {item.Type !== "Movie" &&
+              item.Type !== "Series" &&
+              item.Type !== "Episode" && <MoviePoster item={item} />}
+          </TVFocusablePoster>
+          <TVItemCardText item={item} />
+        </View>
      );
    },
-    [router, showItemActions, api, typography],
+    [router],
  );

  const keyExtractor = useCallback((item: BaseItemDto) => item.Id || "", []);
--- a/app/(auth)/(tabs)/(search)/index.tsx
+++ b/app/(auth)/(tabs)/(search)/index.tsx
@@ -42,7 +42,6 @@ import { SearchTabButtons } from "@/components/search/SearchTabButtons";
 import { TVSearchPage } from "@/components/search/TVSearchPage";
 import useRouter from "@/hooks/useAppRouter";
 import { useJellyseerr } from "@/hooks/useJellyseerr";
-import { useTVItemActionModal } from "@/hooks/useTVItemActionModal";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { useSettings } from "@/utils/atoms/settings";
 import { eventBus } from "@/utils/eventBus";
@@ -70,7 +69,6 @@ export default function search() {
  const params = useLocalSearchParams();
  const insets = useSafeAreaInsets();
  const router = useRouter();
-  const { showItemActions } = useTVItemActionModal();
  const segments = useSegments();
  const from = (segments as string[])[2] || "(search)";

@@ -609,7 +607,6 @@ export default function search() {
        loading={loading}
        noResults={noResults}
        onItemPress={handleItemPress}
-        onItemLongPress={showItemActions}
        searchType={searchType}
        setSearchType={setSearchType}
        showDiscover={!!jellyseerrApi}
--- a/app/(auth)/(tabs)/(watchlists)/[watchlistId].tsx
+++ b/app/(auth)/(tabs)/(watchlists)/[watchlistId].tsx
@@ -24,12 +24,14 @@ import {
 } from "@/components/common/TouchableItemRouter";
 import { ItemCardText } from "@/components/ItemCardText";
 import { ItemPoster } from "@/components/posters/ItemPoster";
-import { TVPosterCard } from "@/components/tv/TVPosterCard";
-import { useScaledTVPosterSizes } from "@/constants/TVPosterSizes";
+import MoviePoster, {
+  TV_POSTER_WIDTH,
+} from "@/components/posters/MoviePoster.tv";
+import SeriesPoster from "@/components/posters/SeriesPoster.tv";
+import { TVFocusablePoster } from "@/components/tv/TVFocusablePoster";
 import { useScaledTVTypography } from "@/constants/TVTypography";
 import useRouter from "@/hooks/useAppRouter";
 import { useOrientation } from "@/hooks/useOrientation";
-import { useTVItemActionModal } from "@/hooks/useTVItemActionModal";
 import {
  useDeleteWatchlist,
  useRemoveFromWatchlist,
@@ -44,12 +46,35 @@ import { userAtom } from "@/providers/JellyfinProvider";
 const TV_ITEM_GAP = 20;
 const TV_HORIZONTAL_PADDING = 60;

+type Typography = ReturnType<typeof useScaledTVTypography>;
+
+const TVItemCardText: React.FC<{
+  item: BaseItemDto;
+  typography: Typography;
+}> = ({ item, typography }) => (
+  <View style={{ marginTop: 12 }}>
+    <Text
+      numberOfLines={1}
+      style={{ fontSize: typography.callout, color: "#FFFFFF" }}
+    >
+      {item.Name}
+    </Text>
+    <Text
+      style={{
+        fontSize: typography.callout - 2,
+        color: "#9CA3AF",
+        marginTop: 2,
+      }}
+    >
+      {item.ProductionYear}
+    </Text>
+  </View>
+);
+
 export default function WatchlistDetailScreen() {
  const typography = useScaledTVTypography();
-  const posterSizes = useScaledTVPosterSizes();
  const { t } = useTranslation();
  const router = useRouter();
-  const { showItemActions } = useTVItemActionModal();
  const navigation = useNavigation();
  const insets = useSafeAreaInsets();
  const { watchlistId } = useLocalSearchParams<{ watchlistId: string }>();
@@ -178,18 +203,26 @@ export default function WatchlistDetailScreen() {
      };

      return (
-        <TVPosterCard
+        <View
          key={item.Id}
-          item={item}
-          orientation='vertical'
-          onPress={handlePress}
-          onLongPress={() => showItemActions(item)}
-          hasTVPreferredFocus={index === 0}
-          width={posterSizes.poster}
-        />
+          style={{
+            width: TV_POSTER_WIDTH,
+          }}
+        >
+          <TVFocusablePoster
+            onPress={handlePress}
+            hasTVPreferredFocus={index === 0}
+          >
+            {item.Type === "Movie" && <MoviePoster item={item} />}
+            {(item.Type === "Series" || item.Type === "Episode") && (
+              <SeriesPoster item={item} />
+            )}
+          </TVFocusablePoster>
+          <TVItemCardText item={item} typography={typography} />
+        </View>
      );
    },
-    [router, showItemActions, posterSizes.poster],
+    [router, typography],
  );

  const renderItem = useCallback(
--- a/app/(auth)/(tabs)/_layout.tsx
+++ b/app/(auth)/(tabs)/_layout.tsx
@@ -12,7 +12,6 @@ import { useTranslation } from "react-i18next";
 import { Platform, View } from "react-native";
 import { SystemBars } from "react-native-edge-to-edge";
 import { Colors } from "@/constants/Colors";
-import { useTVBackHandler } from "@/hooks/useTVBackHandler";
 import { useSettings } from "@/utils/atoms/settings";
 import { eventBus } from "@/utils/eventBus";

@@ -37,9 +36,6 @@ export default function TabLayout() {
  const { settings } = useSettings();
  const { t } = useTranslation();

-  // Handle TV back button - prevent app exit when at root
-  useTVBackHandler();
-
  return (
    <View style={{ flex: 1 }}>
      <SystemBars hidden={false} style='light' />
--- a/app/(auth)/player/direct-player.tsx
+++ b/app/(auth)/player/direct-player.tsx
@@ -10,7 +10,6 @@ import {
  getPlaystateApi,
  getUserLibraryApi,
 } from "@jellyfin/sdk/lib/utils/api";
-import { File } from "expo-file-system";
 import { activateKeepAwakeAsync, deactivateKeepAwake } from "expo-keep-awake";
 import { useLocalSearchParams, useNavigation } from "expo-router";
 import { useAtomValue } from "jotai";
@@ -46,11 +45,10 @@ import {
 } from "@/modules";
 import { useDownload } from "@/providers/DownloadProvider";
 import { DownloadedItem } from "@/providers/Downloads/types";
-import { useInactivity } from "@/providers/InactivityProvider";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+
 import { OfflineModeProvider } from "@/providers/OfflineModeProvider";

-import { getSubtitlesForItem } from "@/utils/atoms/downloadedSubtitles";
 import { useSettings } from "@/utils/atoms/settings";
 import { getDefaultPlaySettings } from "@/utils/jellyfin/getDefaultPlaySettings";
 import { getStreamUrl } from "@/utils/jellyfin/media/getStreamUrl";
@@ -59,8 +57,8 @@ import {
  getMpvSubtitleId,
 } from "@/utils/jellyfin/subtitleUtils";
 import { writeToLog } from "@/utils/log";
+import { generateDeviceProfile } from "@/utils/profiles/native";
 import { msToTicks, ticksToSeconds } from "@/utils/time";
-import { generateDeviceProfile } from "../../../utils/profiles/native";

 export default function page() {
  const videoRef = useRef<MpvPlayerViewRef>(null);
@@ -107,9 +105,6 @@ export default function page() {
  // when data updates, only when the provider initializes
  const downloadedFiles = downloadUtils.getDownloadedItems();

-  // Inactivity timer controls (TV only)
-  const { pauseInactivityTimer, resumeInactivityTimer } = useInactivity();
-
  const revalidateProgressCache = useInvalidatePlaybackProgressCache();

  const lightHapticFeedback = useHaptic("light");
@@ -233,12 +228,7 @@ export default function page() {
            setDownloadedItem(data);
          }
        } else {
-          // Guard against api being null (e.g., during logout)
-          if (!api) {
-            setItemStatus({ isLoading: false, isError: false });
-            return;
-          }
-          const res = await getUserLibraryApi(api).getItem({
+          const res = await getUserLibraryApi(api!).getItem({
            itemId,
            userId: user?.Id,
          });
@@ -272,7 +262,6 @@ export default function page() {
    mediaSource: MediaSourceInfo;
    sessionId: string;
    url: string;
-    requiredHttpHeaders?: Record<string, string>;
  }

  const [stream, setStream] = useState<Stream | null>(null);
@@ -335,7 +324,7 @@ export default function page() {
            deviceProfile: generateDeviceProfile(),
          });
          if (!res) return null;
-          const { mediaSource, sessionId, url, requiredHttpHeaders } = res;
+          const { mediaSource, sessionId, url } = res;

          if (!sessionId || !mediaSource || !url) {
            Alert.alert(
@@ -344,7 +333,7 @@ export default function page() {
            );
            return null;
          }
-          result = { mediaSource, sessionId, url, requiredHttpHeaders };
+          result = { mediaSource, sessionId, url };
        }
        setStream(result);
        setStreamStatus({ isLoading: false, isError: false });
@@ -431,9 +420,7 @@ export default function page() {
    setIsPlaybackStopped(true);
    videoRef.current?.pause();
    revalidateProgressCache();
-    // Resume inactivity timer when leaving player (TV only)
-    resumeInactivityTimer();
-  }, [videoRef, reportPlaybackStopped, progress, resumeInactivityTimer]);
+  }, [videoRef, reportPlaybackStopped, progress]);

  useEffect(() => {
    const beforeRemoveListener = navigation.addListener("beforeRemove", stop);
@@ -600,13 +587,6 @@ export default function page() {
      autoplay: true,
      initialSubtitleId,
      initialAudioId,
-      // Pass cache/buffer settings from user preferences
-      cacheConfig: {
-        enabled: settings.mpvCacheEnabled,
-        cacheSeconds: settings.mpvCacheSeconds,
-        maxBytes: settings.mpvDemuxerMaxBytes,
-        maxBackBytes: settings.mpvDemuxerMaxBackBytes,
-      },
    };

    // Add external subtitles only for online playback
@@ -614,32 +594,17 @@ export default function page() {
      source.externalSubtitles = externalSubs;
    }

-    // Add headers for online streaming (not for local file:// URLs)
-    if (!offline) {
-      const headers: Record<string, string> = {};
-      const isRemoteStream =
-        mediaSource?.IsRemote && mediaSource?.Protocol === "Http";
-
-      // Add auth header only for Jellyfin API requests (not for external/remote streams)
-      if (api?.accessToken && !isRemoteStream) {
-        headers.Authorization = `MediaBrowser Token="${api.accessToken}"`;
-      }
-
-      // Add any required headers from the media source (e.g., for external/remote streams)
-      if (stream?.requiredHttpHeaders) {
-        Object.assign(headers, stream.requiredHttpHeaders);
-      }
-
-      if (Object.keys(headers).length > 0) {
-        source.headers = headers;
-      }
+    // Add auth headers only for online streaming (not for local file:// URLs)
+    if (!offline && api?.accessToken) {
+      source.headers = {
+        Authorization: `MediaBrowser Token="${api.accessToken}"`,
+      };
    }

    return source;
  }, [
    stream?.url,
    stream?.mediaSource,
-    stream?.requiredHttpHeaders,
    item?.UserData?.PlaybackPositionTicks,
    playbackPositionFromUrl,
    api?.basePath,
@@ -647,10 +612,6 @@ export default function page() {
    subtitleIndex,
    audioIndex,
    offline,
-    settings.mpvCacheEnabled,
-    settings.mpvCacheSeconds,
-    settings.mpvDemuxerMaxBytes,
-    settings.mpvDemuxerMaxBackBytes,
  ]);

  const volumeUpCb = useCallback(async () => {
@@ -741,8 +702,6 @@ export default function page() {
        setIsPlaying(true);
        setIsBuffering(false);
        setHasPlaybackStarted(true);
-        // Pause inactivity timer during playback (TV only)
-        pauseInactivityTimer();
        if (item?.Id) {
          playbackManager.reportPlaybackProgress(
            currentPlayStateInfo() as PlaybackProgressInfo,
@@ -754,8 +713,6 @@ export default function page() {

      if (isPaused) {
        setIsPlaying(false);
-        // Resume inactivity timer when paused (TV only)
-        resumeInactivityTimer();
        if (item?.Id) {
          playbackManager.reportPlaybackProgress(
            currentPlayStateInfo() as PlaybackProgressInfo,
@@ -769,13 +726,7 @@ export default function page() {
        setIsBuffering(isLoading);
      }
    },
-    [
-      playbackManager,
-      item?.Id,
-      progress,
-      pauseInactivityTimer,
-      resumeInactivityTimer,
-    ],
+    [playbackManager, item?.Id, progress],
  );

  /** PiP handler for MPV */
@@ -1077,27 +1028,14 @@ export default function page() {
      if (settings.mpvSubtitleAlignY !== undefined) {
        await videoRef.current?.setSubtitleAlignY?.(settings.mpvSubtitleAlignY);
      }
-      // Apply subtitle background (iOS only - doesn't work on tvOS due to composite OSD limitation)
-      // mpv uses #RRGGBBAA format (alpha last, same as CSS)
-      if (settings.mpvSubtitleBackgroundEnabled) {
-        const opacity = settings.mpvSubtitleBackgroundOpacity ?? 75;
-        const alphaHex = Math.round((opacity / 100) * 255)
-          .toString(16)
-          .padStart(2, "0")
-          .toUpperCase();
-        // Enable background-box mode (required for sub-back-color to work)
-        await videoRef.current?.setSubtitleBorderStyle?.("background-box");
-        await videoRef.current?.setSubtitleBackgroundColor?.(
-          `#000000${alphaHex}`,
+      if (settings.mpvSubtitleFontSize !== undefined) {
+        await videoRef.current?.setSubtitleFontSize?.(
+          settings.mpvSubtitleFontSize,
        );
-        // Force override ASS subtitle styles so background shows on styled subtitles
-        await videoRef.current?.setSubtitleAssOverride?.("force");
-      } else {
-        // Restore default outline-and-shadow style
-        await videoRef.current?.setSubtitleBorderStyle?.("outline-and-shadow");
-        await videoRef.current?.setSubtitleBackgroundColor?.("#00000000");
-        // Restore default ASS behavior (keep original styles)
-        await videoRef.current?.setSubtitleAssOverride?.("no");
+      }
+      // Apply subtitle size from general settings
+      if (settings.subtitleSize) {
+        await videoRef.current?.setSubtitleFontSize?.(settings.subtitleSize);
      }
    };

@@ -1118,28 +1056,6 @@ export default function page() {
    applyInitialPlaybackSpeed();
  }, [isVideoLoaded, initialPlaybackSpeed]);

-  // TV only: Pre-load locally downloaded subtitles when video loads
-  // This adds them to MPV's track list without auto-selecting them
-  useEffect(() => {
-    if (!Platform.isTV || !isVideoLoaded || !videoRef.current || !itemId)
-      return;
-
-    const preloadLocalSubtitles = async () => {
-      const localSubs = getSubtitlesForItem(itemId);
-      for (const sub of localSubs) {
-        // Verify file still exists (cache may have been cleared)
-        const subtitleFile = new File(sub.filePath);
-        if (!subtitleFile.exists) {
-          continue;
-        }
-        // Add subtitle file to MPV without selecting it (select: false)
-        await videoRef.current?.addSubtitleFile?.(sub.filePath, false);
-      }
-    };
-
-    preloadLocalSubtitles();
-  }, [isVideoLoaded, itemId]);
-
  // Show error UI first, before checking loading/missing‐data
  if (itemStatus.isError || streamStatus.isError) {
    return (
@@ -1264,7 +1180,6 @@ export default function page() {
                  getTechnicalInfo={getTechnicalInfo}
                  playMethod={playMethod}
                  transcodeReasons={transcodeReasons}
-                  downloadedFiles={downloadedFiles}
                />
              ) : (
                <Controls
--- a/app/(auth)/tv-subtitle-modal.tsx
+++ b/app/(auth)/tv-subtitle-modal.tsx
@@ -659,30 +659,8 @@ export default function TVSubtitleModal() {

          // Do NOT close modal - user can see and select the new track
        } else if (downloadResult.type === "local" && downloadResult.path) {
-          // Notify parent that a local subtitle was downloaded
          modalState?.onLocalSubtitleDownloaded?.(downloadResult.path);
-
-          // Check if component is still mounted after callback
-          if (!isMountedRef.current) return;
-
-          // Refresh tracks to include the newly downloaded subtitle
-          if (modalState?.refreshSubtitleTracks) {
-            const newTracks = await modalState.refreshSubtitleTracks();
-
-            // Check if component is still mounted after fetching tracks
-            if (!isMountedRef.current) return;
-
-            // Update atom with new tracks
-            store.set(tvSubtitleModalAtom, {
-              ...modalState,
-              subtitleTracks: newTracks,
-            });
-            // Switch to tracks tab to show the new subtitle
-            setActiveTab("tracks");
-          } else {
-            // No refreshSubtitleTracks available (e.g., from player), just close
-            handleClose();
-          }
+          handleClose(); // Only close for local downloads
        }
      } catch (error) {
        console.error("Failed to download subtitle:", error);
@@ -707,17 +685,13 @@ export default function TVSubtitleModal() {
      value: -1,
      selected: currentSubtitleIndex === -1,
      setTrack: () => modalState?.onDisableSubtitles?.(),
-      isLocal: false,
    };
    const options = subtitleTracks.map((track: Track) => ({
      label: track.name,
-      sublabel: track.isLocal
-        ? t("player.downloaded") || "Downloaded"
-        : (undefined as string | undefined),
+      sublabel: undefined as string | undefined,
      value: track.index,
      selected: track.index === currentSubtitleIndex,
      setTrack: track.setTrack,
-      isLocal: track.isLocal ?? false,
    }));
    return [noneOption, ...options];
  }, [subtitleTracks, currentSubtitleIndex, t, modalState]);
@@ -931,8 +905,8 @@ export default function TVSubtitleModal() {
                  <View style={styles.settingRow}>
                    <TVStepperControl
                      value={settings.mpvSubtitleScale ?? 1.0}
-                      min={0.1}
-                      max={3.0}
+                      min={0.5}
+                      max={2.0}
                      step={0.1}
                      formatValue={(v) => `${v.toFixed(1)}x`}
                      onChange={(newValue) => {
--- a/app/(auth)/tv-user-switch-modal.tsx
+++ b/app/(auth)/tv-user-switch-modal.tsx
@@ -1,174 +0,0 @@
-import { BlurView } from "expo-blur";
-import { useAtomValue } from "jotai";
-import { useEffect, useRef, useState } from "react";
-import { useTranslation } from "react-i18next";
-import {
-  Animated,
-  Easing,
-  ScrollView,
-  StyleSheet,
-  TVFocusGuideView,
-  View,
-} from "react-native";
-import { Text } from "@/components/common/Text";
-import { TVUserCard } from "@/components/tv/TVUserCard";
-import useRouter from "@/hooks/useAppRouter";
-import { tvUserSwitchModalAtom } from "@/utils/atoms/tvUserSwitchModal";
-import type { SavedServerAccount } from "@/utils/secureCredentials";
-import { store } from "@/utils/store";
-
-export default function TVUserSwitchModalPage() {
-  const { t } = useTranslation();
-  const router = useRouter();
-  const modalState = useAtomValue(tvUserSwitchModalAtom);
-
-  const [isReady, setIsReady] = useState(false);
-  const firstCardRef = useRef<View>(null);
-
-  const overlayOpacity = useRef(new Animated.Value(0)).current;
-  const sheetTranslateY = useRef(new Animated.Value(200)).current;
-
-  // Animate in on mount and cleanup atom on unmount
-  useEffect(() => {
-    overlayOpacity.setValue(0);
-    sheetTranslateY.setValue(200);
-
-    Animated.parallel([
-      Animated.timing(overlayOpacity, {
-        toValue: 1,
-        duration: 250,
-        easing: Easing.out(Easing.quad),
-        useNativeDriver: true,
-      }),
-      Animated.timing(sheetTranslateY, {
-        toValue: 0,
-        duration: 300,
-        easing: Easing.out(Easing.cubic),
-        useNativeDriver: true,
-      }),
-    ]).start();
-
-    // Delay focus setup to allow layout
-    const timer = setTimeout(() => setIsReady(true), 100);
-    return () => {
-      clearTimeout(timer);
-      // Clear the atom on unmount to prevent stale callbacks from being retained
-      store.set(tvUserSwitchModalAtom, null);
-    };
-  }, [overlayOpacity, sheetTranslateY]);
-
-  // Request focus on the first card when ready
-  useEffect(() => {
-    if (isReady && firstCardRef.current) {
-      const timer = setTimeout(() => {
-        (firstCardRef.current as any)?.requestTVFocus?.();
-      }, 50);
-      return () => clearTimeout(timer);
-    }
-  }, [isReady]);
-
-  const handleSelect = (account: SavedServerAccount) => {
-    modalState?.onAccountSelect(account);
-    store.set(tvUserSwitchModalAtom, null);
-    router.back();
-  };
-
-  // If no modal state, just return null
-  if (!modalState) {
-    return null;
-  }
-
-  return (
-    <Animated.View style={[styles.overlay, { opacity: overlayOpacity }]}>
-      <Animated.View
-        style={[
-          styles.sheetContainer,
-          { transform: [{ translateY: sheetTranslateY }] },
-        ]}
-      >
-        <BlurView intensity={80} tint='dark' style={styles.blurContainer}>
-          <TVFocusGuideView
-            autoFocus
-            trapFocusUp
-            trapFocusDown
-            trapFocusLeft
-            trapFocusRight
-            style={styles.content}
-          >
-            <Text style={styles.title}>
-              {t("home.settings.switch_user.title")}
-            </Text>
-            <Text style={styles.subtitle}>{modalState.serverName}</Text>
-            {isReady && (
-              <ScrollView
-                horizontal
-                showsHorizontalScrollIndicator={false}
-                style={styles.scrollView}
-                contentContainerStyle={styles.scrollContent}
-              >
-                {modalState.accounts.map((account, index) => {
-                  const isCurrent = account.userId === modalState.currentUserId;
-                  return (
-                    <TVUserCard
-                      key={account.userId}
-                      ref={index === 0 ? firstCardRef : undefined}
-                      username={account.username}
-                      securityType={account.securityType}
-                      hasTVPreferredFocus={index === 0}
-                      isCurrent={isCurrent}
-                      onPress={() => handleSelect(account)}
-                    />
-                  );
-                })}
-              </ScrollView>
-            )}
-          </TVFocusGuideView>
-        </BlurView>
-      </Animated.View>
-    </Animated.View>
-  );
-}
-
-const styles = StyleSheet.create({
-  overlay: {
-    flex: 1,
-    backgroundColor: "rgba(0, 0, 0, 0.5)",
-    justifyContent: "flex-end",
-  },
-  sheetContainer: {
-    width: "100%",
-  },
-  blurContainer: {
-    borderTopLeftRadius: 24,
-    borderTopRightRadius: 24,
-    overflow: "hidden",
-  },
-  content: {
-    paddingTop: 24,
-    paddingBottom: 50,
-    overflow: "visible",
-  },
-  title: {
-    fontSize: 18,
-    fontWeight: "500",
-    color: "rgba(255,255,255,0.6)",
-    marginBottom: 4,
-    paddingHorizontal: 48,
-    textTransform: "uppercase",
-    letterSpacing: 1,
-  },
-  subtitle: {
-    fontSize: 14,
-    color: "rgba(255,255,255,0.4)",
-    marginBottom: 16,
-    paddingHorizontal: 48,
-  },
-  scrollView: {
-    overflow: "visible",
-  },
-  scrollContent: {
-    paddingHorizontal: 48,
-    paddingVertical: 20,
-    gap: 16,
-  },
-});
--- a/app/_layout.tsx
+++ b/app/_layout.tsx
@@ -10,11 +10,10 @@ import * as BackgroundTask from "expo-background-task";
 import * as Device from "expo-device";
 import { Platform } from "react-native";
 import { GlobalModal } from "@/components/GlobalModal";
-import { enableTVMenuKeyInterception } from "@/hooks/useTVBackHandler";
+
 import i18n from "@/i18n";
 import { DownloadProvider } from "@/providers/DownloadProvider";
 import { GlobalModalProvider } from "@/providers/GlobalModalProvider";
-import { InactivityProvider } from "@/providers/InactivityProvider";
 import { IntroSheetProvider } from "@/providers/IntroSheetProvider";
 import {
  apiAtom,
@@ -56,31 +55,15 @@ import * as TaskManager from "expo-task-manager";
 import { Provider as JotaiProvider, useAtom } from "jotai";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { I18nextProvider } from "react-i18next";
-import { Appearance, LogBox } from "react-native";
+import { Appearance } from "react-native";
 import { SystemBars } from "react-native-edge-to-edge";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
-
-// Suppress harmless tvOS warning from react-native-gesture-handler
-if (Platform.isTV) {
-  LogBox.ignoreLogs(["HoverGestureHandler is not supported on tvOS"]);
-}
-
 import useRouter from "@/hooks/useAppRouter";
 import { userAtom } from "@/providers/JellyfinProvider";
 import { store as jotaiStore, store } from "@/utils/store";
 import "react-native-reanimated";
-import {
-  configureReanimatedLogger,
-  ReanimatedLogLevel,
-} from "react-native-reanimated";
 import { Toaster } from "sonner-native";

-// Disable strict mode warnings for reading shared values during render
-configureReanimatedLogger({
-  level: ReanimatedLogLevel.warn,
-  strict: false,
-});
-
 if (!Platform.isTV) {
  Notifications.setNotificationHandler({
    handleNotification: async () => ({
@@ -250,11 +233,6 @@ function Layout() {
  const _segments = useSegments();
  const router = useRouter();

-  // Enable TV menu key interception so React Native handles it instead of tvOS
-  useEffect(() => {
-    enableTVMenuKeyInterception();
-  }, []);
-
  useEffect(() => {
    i18n.changeLanguage(
      settings?.preferedLanguage ?? getLocales()[0].languageCode ?? "en",
@@ -275,19 +253,22 @@ function Layout() {
          deviceId: getOrSetDeviceId(),
          userId: user.Id,
        })
+        .then((_) => console.log("Posted expo push token"))
        .catch((_) =>
          writeErrorLog("Failed to push expo push token to plugin"),
        );
-    }
+    } else console.log("No token available");
  }, [api, expoPushToken, user]);

  const registerNotifications = useCallback(async () => {
    if (Platform.OS === "android") {
+      console.log("Setting android notification channel 'default'");
      await Notifications?.setNotificationChannelAsync("default", {
        name: "default",
      });

      // Create dedicated channel for download notifications
+      console.log("Setting android notification channel 'downloads'");
      await Notifications?.setNotificationChannelAsync("downloads", {
        name: "Downloads",
        importance: Notifications.AndroidImportance.DEFAULT,
@@ -402,145 +383,119 @@ function Layout() {
      }}
    >
      <JellyfinProvider>
-        <InactivityProvider>
-          <ServerUrlProvider>
-            <NetworkStatusProvider>
-              <PlaySettingsProvider>
-                <LogProvider>
-                  <WebSocketProvider>
-                    <DownloadProvider>
-                      <MusicPlayerProvider>
-                        <GlobalModalProvider>
-                          <BottomSheetModalProvider>
-                            <IntroSheetProvider>
-                              <ThemeProvider value={DarkTheme}>
-                                <SystemBars style='light' hidden={false} />
-                                <Stack initialRouteName='(auth)/(tabs)'>
-                                  <Stack.Screen
-                                    name='(auth)/(tabs)'
-                                    options={{
-                                      headerShown: false,
-                                      title: "",
-                                      header: () => null,
-                                    }}
-                                  />
-                                  <Stack.Screen
-                                    name='(auth)/player'
-                                    options={{
-                                      headerShown: false,
-                                      title: "",
-                                      header: () => null,
-                                    }}
-                                  />
-                                  <Stack.Screen
-                                    name='(auth)/now-playing'
-                                    options={{
-                                      headerShown: false,
-                                      presentation: "modal",
-                                      gestureEnabled: true,
-                                    }}
-                                  />
-                                  <Stack.Screen
-                                    name='login'
-                                    options={{
-                                      headerShown: true,
-                                      title: "",
-                                      headerTransparent: Platform.OS === "ios",
-                                    }}
-                                  />
-                                  <Stack.Screen name='+not-found' />
-                                  <Stack.Screen
-                                    name='(auth)/tv-option-modal'
-                                    options={{
-                                      headerShown: false,
-                                      presentation: "transparentModal",
-                                      animation: "fade",
-                                    }}
-                                  />
-                                  <Stack.Screen
-                                    name='(auth)/tv-subtitle-modal'
-                                    options={{
-                                      headerShown: false,
-                                      presentation: "transparentModal",
-                                      animation: "fade",
-                                    }}
-                                  />
-                                  <Stack.Screen
-                                    name='(auth)/tv-request-modal'
-                                    options={{
-                                      headerShown: false,
-                                      presentation: "transparentModal",
-                                      animation: "fade",
-                                    }}
-                                  />
-                                  <Stack.Screen
-                                    name='(auth)/tv-season-select-modal'
-                                    options={{
-                                      headerShown: false,
-                                      presentation: "transparentModal",
-                                      animation: "fade",
-                                    }}
-                                  />
-                                  <Stack.Screen
-                                    name='(auth)/tv-series-season-modal'
-                                    options={{
-                                      headerShown: false,
-                                      presentation: "transparentModal",
-                                      animation: "fade",
-                                    }}
-                                  />
-                                  <Stack.Screen
-                                    name='tv-account-action-modal'
-                                    options={{
-                                      headerShown: false,
-                                      presentation: "transparentModal",
-                                      animation: "fade",
-                                    }}
-                                  />
-                                  <Stack.Screen
-                                    name='tv-account-select-modal'
-                                    options={{
-                                      headerShown: false,
-                                      presentation: "transparentModal",
-                                      animation: "fade",
-                                    }}
-                                  />
-                                  <Stack.Screen
-                                    name='(auth)/tv-user-switch-modal'
-                                    options={{
-                                      headerShown: false,
-                                      presentation: "transparentModal",
-                                      animation: "fade",
-                                    }}
-                                  />
-                                </Stack>
-                                <Toaster
-                                  duration={4000}
-                                  toastOptions={{
-                                    style: {
-                                      backgroundColor: "#262626",
-                                      borderColor: "#363639",
-                                      borderWidth: 1,
-                                    },
-                                    titleStyle: {
-                                      color: "white",
-                                    },
+        <ServerUrlProvider>
+          <NetworkStatusProvider>
+            <PlaySettingsProvider>
+              <LogProvider>
+                <WebSocketProvider>
+                  <DownloadProvider>
+                    <MusicPlayerProvider>
+                      <GlobalModalProvider>
+                        <BottomSheetModalProvider>
+                          <IntroSheetProvider>
+                            <ThemeProvider value={DarkTheme}>
+                              <SystemBars style='light' hidden={false} />
+                              <Stack initialRouteName='(auth)/(tabs)'>
+                                <Stack.Screen
+                                  name='(auth)/(tabs)'
+                                  options={{
+                                    headerShown: false,
+                                    title: "",
+                                    header: () => null,
                                  }}
-                                  closeButton
                                />
-                                {!Platform.isTV && <GlobalModal />}
-                              </ThemeProvider>
-                            </IntroSheetProvider>
-                          </BottomSheetModalProvider>
-                        </GlobalModalProvider>
-                      </MusicPlayerProvider>
-                    </DownloadProvider>
-                  </WebSocketProvider>
-                </LogProvider>
-              </PlaySettingsProvider>
-            </NetworkStatusProvider>
-          </ServerUrlProvider>
-        </InactivityProvider>
+                                <Stack.Screen
+                                  name='(auth)/player'
+                                  options={{
+                                    headerShown: false,
+                                    title: "",
+                                    header: () => null,
+                                  }}
+                                />
+                                <Stack.Screen
+                                  name='(auth)/now-playing'
+                                  options={{
+                                    headerShown: false,
+                                    presentation: "modal",
+                                    gestureEnabled: true,
+                                  }}
+                                />
+                                <Stack.Screen
+                                  name='login'
+                                  options={{
+                                    headerShown: true,
+                                    title: "",
+                                    headerTransparent: Platform.OS === "ios",
+                                  }}
+                                />
+                                <Stack.Screen name='+not-found' />
+                                <Stack.Screen
+                                  name='(auth)/tv-option-modal'
+                                  options={{
+                                    headerShown: false,
+                                    presentation: "transparentModal",
+                                    animation: "fade",
+                                  }}
+                                />
+                                <Stack.Screen
+                                  name='(auth)/tv-subtitle-modal'
+                                  options={{
+                                    headerShown: false,
+                                    presentation: "transparentModal",
+                                    animation: "fade",
+                                  }}
+                                />
+                                <Stack.Screen
+                                  name='(auth)/tv-request-modal'
+                                  options={{
+                                    headerShown: false,
+                                    presentation: "transparentModal",
+                                    animation: "fade",
+                                  }}
+                                />
+                                <Stack.Screen
+                                  name='(auth)/tv-season-select-modal'
+                                  options={{
+                                    headerShown: false,
+                                    presentation: "transparentModal",
+                                    animation: "fade",
+                                  }}
+                                />
+                                <Stack.Screen
+                                  name='(auth)/tv-series-season-modal'
+                                  options={{
+                                    headerShown: false,
+                                    presentation: "transparentModal",
+                                    animation: "fade",
+                                  }}
+                                />
+                              </Stack>
+                              <Toaster
+                                duration={4000}
+                                toastOptions={{
+                                  style: {
+                                    backgroundColor: "#262626",
+                                    borderColor: "#363639",
+                                    borderWidth: 1,
+                                  },
+                                  titleStyle: {
+                                    color: "white",
+                                  },
+                                }}
+                                closeButton
+                              />
+                              {!Platform.isTV && <GlobalModal />}
+                            </ThemeProvider>
+                          </IntroSheetProvider>
+                        </BottomSheetModalProvider>
+                      </GlobalModalProvider>
+                    </MusicPlayerProvider>
+                  </DownloadProvider>
+                </WebSocketProvider>
+              </LogProvider>
+            </PlaySettingsProvider>
+          </NetworkStatusProvider>
+        </ServerUrlProvider>
      </JellyfinProvider>
    </PersistQueryClientProvider>
  );
--- a/app/tv-account-action-modal.tsx
+++ b/app/tv-account-action-modal.tsx
@@ -1,251 +0,0 @@
-import { Ionicons } from "@expo/vector-icons";
-import { BlurView } from "expo-blur";
-import { useAtomValue } from "jotai";
-import { useEffect, useRef, useState } from "react";
-import { useTranslation } from "react-i18next";
-import {
-  Animated,
-  Easing,
-  Pressable,
-  ScrollView,
-  TVFocusGuideView,
-} from "react-native";
-import { Text } from "@/components/common/Text";
-import { useScaledTVTypography } from "@/constants/TVTypography";
-import useRouter from "@/hooks/useAppRouter";
-import { tvAccountActionModalAtom } from "@/utils/atoms/tvAccountActionModal";
-import { store } from "@/utils/store";
-
-// Action card component
-const TVAccountActionCard: React.FC<{
-  label: string;
-  icon: keyof typeof Ionicons.glyphMap;
-  variant?: "default" | "destructive";
-  hasTVPreferredFocus?: boolean;
-  onPress: () => void;
-}> = ({ label, icon, variant = "default", hasTVPreferredFocus, onPress }) => {
-  const [focused, setFocused] = useState(false);
-  const scale = useRef(new Animated.Value(1)).current;
-  const typography = useScaledTVTypography();
-
-  const animateTo = (v: number) =>
-    Animated.timing(scale, {
-      toValue: v,
-      duration: 150,
-      easing: Easing.out(Easing.quad),
-      useNativeDriver: true,
-    }).start();
-
-  const isDestructive = variant === "destructive";
-
-  return (
-    <Pressable
-      onPress={onPress}
-      onFocus={() => {
-        setFocused(true);
-        animateTo(1.05);
-      }}
-      onBlur={() => {
-        setFocused(false);
-        animateTo(1);
-      }}
-      hasTVPreferredFocus={hasTVPreferredFocus}
-    >
-      <Animated.View
-        style={{
-          transform: [{ scale }],
-          flexDirection: "row",
-          height: 60,
-          backgroundColor: focused
-            ? isDestructive
-              ? "#ef4444"
-              : "#fff"
-            : isDestructive
-              ? "rgba(239, 68, 68, 0.2)"
-              : "rgba(255,255,255,0.08)",
-          borderRadius: 14,
-          justifyContent: "center",
-          alignItems: "center",
-          paddingHorizontal: 24,
-          gap: 12,
-        }}
-      >
-        <Ionicons
-          name={icon}
-          size={22}
-          color={
-            focused
-              ? isDestructive
-                ? "#fff"
-                : "#000"
-              : isDestructive
-                ? "#ef4444"
-                : "#fff"
-          }
-        />
-        <Text
-          style={{
-            fontSize: typography.callout,
-            color: focused
-              ? isDestructive
-                ? "#fff"
-                : "#000"
-              : isDestructive
-                ? "#ef4444"
-                : "#fff",
-            fontWeight: "600",
-          }}
-          numberOfLines={1}
-        >
-          {label}
-        </Text>
-      </Animated.View>
-    </Pressable>
-  );
-};
-
-export default function TVAccountActionModalPage() {
-  const typography = useScaledTVTypography();
-  const router = useRouter();
-  const modalState = useAtomValue(tvAccountActionModalAtom);
-  const { t } = useTranslation();
-
-  const [isReady, setIsReady] = useState(false);
-  const overlayOpacity = useRef(new Animated.Value(0)).current;
-  const sheetTranslateY = useRef(new Animated.Value(200)).current;
-
-  // Animate in on mount
-  useEffect(() => {
-    overlayOpacity.setValue(0);
-    sheetTranslateY.setValue(200);
-
-    Animated.parallel([
-      Animated.timing(overlayOpacity, {
-        toValue: 1,
-        duration: 250,
-        easing: Easing.out(Easing.quad),
-        useNativeDriver: true,
-      }),
-      Animated.timing(sheetTranslateY, {
-        toValue: 0,
-        duration: 300,
-        easing: Easing.out(Easing.cubic),
-        useNativeDriver: true,
-      }),
-    ]).start();
-
-    const timer = setTimeout(() => setIsReady(true), 100);
-    return () => {
-      clearTimeout(timer);
-      store.set(tvAccountActionModalAtom, null);
-    };
-  }, [overlayOpacity, sheetTranslateY]);
-
-  const handleLogin = () => {
-    modalState?.onLogin();
-    router.back();
-  };
-
-  const handleDelete = () => {
-    modalState?.onDelete();
-    router.back();
-  };
-
-  if (!modalState) {
-    return null;
-  }
-
-  return (
-    <Animated.View
-      style={{
-        flex: 1,
-        backgroundColor: "rgba(0, 0, 0, 0.5)",
-        justifyContent: "flex-end",
-        opacity: overlayOpacity,
-      }}
-    >
-      <Animated.View
-        style={{
-          width: "100%",
-          transform: [{ translateY: sheetTranslateY }],
-        }}
-      >
-        <BlurView
-          intensity={80}
-          tint='dark'
-          style={{
-            borderTopLeftRadius: 24,
-            borderTopRightRadius: 24,
-            overflow: "hidden",
-          }}
-        >
-          <TVFocusGuideView
-            autoFocus
-            trapFocusUp
-            trapFocusDown
-            trapFocusLeft
-            trapFocusRight
-            style={{
-              paddingTop: 24,
-              paddingBottom: 50,
-              overflow: "visible",
-            }}
-          >
-            {/* Account username as title */}
-            <Text
-              style={{
-                fontSize: typography.heading,
-                fontWeight: "600",
-                color: "#FFFFFF",
-                marginBottom: 4,
-                paddingHorizontal: 48,
-              }}
-            >
-              {modalState.account.username}
-            </Text>
-
-            {/* Server name as subtitle */}
-            <Text
-              style={{
-                fontSize: typography.callout,
-                fontWeight: "500",
-                color: "rgba(255,255,255,0.6)",
-                marginBottom: 16,
-                paddingHorizontal: 48,
-              }}
-            >
-              {modalState.server.name || modalState.server.address}
-            </Text>
-
-            {/* Horizontal options */}
-            {isReady && (
-              <ScrollView
-                horizontal
-                showsHorizontalScrollIndicator={false}
-                style={{ overflow: "visible" }}
-                contentContainerStyle={{
-                  paddingHorizontal: 48,
-                  paddingVertical: 10,
-                  gap: 12,
-                }}
-              >
-                <TVAccountActionCard
-                  label={t("common.login")}
-                  icon='log-in-outline'
-                  hasTVPreferredFocus
-                  onPress={handleLogin}
-                />
-                <TVAccountActionCard
-                  label={t("common.delete")}
-                  icon='trash-outline'
-                  variant='destructive'
-                  onPress={handleDelete}
-                />
-              </ScrollView>
-            )}
-          </TVFocusGuideView>
-        </BlurView>
-      </Animated.View>
-    </Animated.View>
-  );
-}
--- a/app/tv-account-select-modal.tsx
+++ b/app/tv-account-select-modal.tsx
@@ -1,256 +0,0 @@
-import { Ionicons } from "@expo/vector-icons";
-import { BlurView } from "expo-blur";
-import { useAtomValue } from "jotai";
-import { useEffect, useRef, useState } from "react";
-import { useTranslation } from "react-i18next";
-import {
-  Animated,
-  Easing,
-  Pressable,
-  ScrollView,
-  TVFocusGuideView,
-} from "react-native";
-import { Text } from "@/components/common/Text";
-import { TVUserCard } from "@/components/tv/TVUserCard";
-import { useScaledTVTypography } from "@/constants/TVTypography";
-import useRouter from "@/hooks/useAppRouter";
-import { tvAccountSelectModalAtom } from "@/utils/atoms/tvAccountSelectModal";
-import { store } from "@/utils/store";
-
-// Action button for bottom sheet
-const TVAccountSelectAction: React.FC<{
-  label: string;
-  icon: keyof typeof Ionicons.glyphMap;
-  variant?: "default" | "destructive";
-  onPress: () => void;
-}> = ({ label, icon, variant = "default", onPress }) => {
-  const [focused, setFocused] = useState(false);
-  const scale = useRef(new Animated.Value(1)).current;
-  const typography = useScaledTVTypography();
-
-  const animateTo = (v: number) =>
-    Animated.timing(scale, {
-      toValue: v,
-      duration: 150,
-      easing: Easing.out(Easing.quad),
-      useNativeDriver: true,
-    }).start();
-
-  const isDestructive = variant === "destructive";
-
-  return (
-    <Pressable
-      onPress={onPress}
-      onFocus={() => {
-        setFocused(true);
-        animateTo(1.05);
-      }}
-      onBlur={() => {
-        setFocused(false);
-        animateTo(1);
-      }}
-    >
-      <Animated.View
-        style={{
-          transform: [{ scale }],
-          flexDirection: "row",
-          backgroundColor: focused
-            ? isDestructive
-              ? "#ef4444"
-              : "#fff"
-            : isDestructive
-              ? "rgba(239, 68, 68, 0.2)"
-              : "rgba(255,255,255,0.08)",
-          borderRadius: 14,
-          alignItems: "center",
-          paddingHorizontal: 16,
-          paddingVertical: 14,
-          minHeight: 72,
-          gap: 14,
-        }}
-      >
-        <Ionicons
-          name={icon}
-          size={22}
-          color={
-            focused
-              ? isDestructive
-                ? "#fff"
-                : "#000"
-              : isDestructive
-                ? "#ef4444"
-                : "#fff"
-          }
-        />
-        <Text
-          style={{
-            fontSize: typography.callout,
-            color: focused
-              ? isDestructive
-                ? "#fff"
-                : "#000"
-              : isDestructive
-                ? "#ef4444"
-                : "#fff",
-            fontWeight: "600",
-          }}
-          numberOfLines={1}
-        >
-          {label}
-        </Text>
-      </Animated.View>
-    </Pressable>
-  );
-};
-
-export default function TVAccountSelectModalPage() {
-  const typography = useScaledTVTypography();
-  const router = useRouter();
-  const modalState = useAtomValue(tvAccountSelectModalAtom);
-  const { t } = useTranslation();
-
-  const [isReady, setIsReady] = useState(false);
-  const overlayOpacity = useRef(new Animated.Value(0)).current;
-  const sheetTranslateY = useRef(new Animated.Value(300)).current;
-
-  // Animate in on mount
-  useEffect(() => {
-    overlayOpacity.setValue(0);
-    sheetTranslateY.setValue(300);
-
-    Animated.parallel([
-      Animated.timing(overlayOpacity, {
-        toValue: 1,
-        duration: 250,
-        easing: Easing.out(Easing.quad),
-        useNativeDriver: true,
-      }),
-      Animated.timing(sheetTranslateY, {
-        toValue: 0,
-        duration: 300,
-        easing: Easing.out(Easing.cubic),
-        useNativeDriver: true,
-      }),
-    ]).start();
-
-    const timer = setTimeout(() => setIsReady(true), 100);
-    return () => {
-      clearTimeout(timer);
-      store.set(tvAccountSelectModalAtom, null);
-    };
-  }, [overlayOpacity, sheetTranslateY]);
-
-  if (!modalState) {
-    return null;
-  }
-
-  return (
-    <Animated.View
-      style={{
-        flex: 1,
-        backgroundColor: "rgba(0, 0, 0, 0.5)",
-        justifyContent: "flex-end",
-        opacity: overlayOpacity,
-      }}
-    >
-      <Animated.View
-        style={{
-          width: "100%",
-          transform: [{ translateY: sheetTranslateY }],
-        }}
-      >
-        <BlurView
-          intensity={80}
-          tint='dark'
-          style={{
-            borderTopLeftRadius: 24,
-            borderTopRightRadius: 24,
-            overflow: "hidden",
-          }}
-        >
-          <TVFocusGuideView
-            autoFocus
-            trapFocusUp
-            trapFocusDown
-            trapFocusLeft
-            trapFocusRight
-            style={{
-              paddingTop: 24,
-              paddingBottom: 50,
-              overflow: "visible",
-            }}
-          >
-            {/* Title */}
-            <Text
-              style={{
-                fontSize: typography.heading,
-                fontWeight: "600",
-                color: "#FFFFFF",
-                marginBottom: 4,
-                paddingHorizontal: 48,
-              }}
-            >
-              {t("server.select_account")}
-            </Text>
-
-            {/* Server name as subtitle */}
-            <Text
-              style={{
-                fontSize: typography.callout,
-                fontWeight: "500",
-                color: "rgba(255,255,255,0.6)",
-                marginBottom: 16,
-                paddingHorizontal: 48,
-              }}
-            >
-              {modalState.server.name || modalState.server.address}
-            </Text>
-
-            {/* All options in single horizontal row */}
-            {isReady && (
-              <ScrollView
-                horizontal
-                showsHorizontalScrollIndicator={false}
-                style={{ overflow: "visible" }}
-                contentContainerStyle={{
-                  paddingHorizontal: 48,
-                  paddingVertical: 20,
-                  gap: 16,
-                }}
-              >
-                {modalState.server.accounts?.map((account, index) => (
-                  <TVUserCard
-                    key={account.userId}
-                    username={account.username}
-                    securityType={account.securityType}
-                    onPress={() => {
-                      modalState.onAccountAction(account);
-                    }}
-                    hasTVPreferredFocus={index === 0}
-                  />
-                ))}
-                <TVAccountSelectAction
-                  label={t("server.add_account")}
-                  icon='person-add-outline'
-                  onPress={() => {
-                    modalState.onAddAccount();
-                    router.back();
-                  }}
-                />
-                <TVAccountSelectAction
-                  label={t("server.remove_server")}
-                  icon='trash-outline'
-                  variant='destructive'
-                  onPress={() => {
-                    modalState.onDeleteServer();
-                    router.back();
-                  }}
-                />
-              </ScrollView>
-            )}
-          </TVFocusGuideView>
-        </BlurView>
-      </Animated.View>
-    </Animated.View>
-  );
-}
--- a/bun.lock
+++ b/bun.lock
@@ -25,7 +25,6 @@
        "expo": "~54.0.31",
        "expo-application": "~7.0.8",
        "expo-asset": "~12.0.12",
-        "expo-av": "^16.0.8",
        "expo-background-task": "~1.0.10",
        "expo-blur": "~15.0.8",
        "expo-brightness": "~14.0.8",
@@ -1009,8 +1008,6 @@

    "expo-asset": ["expo-asset@12.0.12", "", { "dependencies": { "@expo/image-utils": "^0.8.8", "expo-constants": "~18.0.12" }, "peerDependencies": { "expo": "*", "react": "*", "react-native": "*" } }, "sha512-CsXFCQbx2fElSMn0lyTdRIyKlSXOal6ilLJd+yeZ6xaC7I9AICQgscY5nj0QcwgA+KYYCCEQEBndMsmj7drOWQ=="],

-    "expo-av": ["expo-av@16.0.8", "", { "peerDependencies": { "expo": "*", "react": "*", "react-native": "*", "react-native-web": "*" }, "optionalPeers": ["react-native-web"] }, "sha512-cmVPftGR/ca7XBgs7R6ky36lF3OC0/MM/lpgX/yXqfv0jASTsh7AYX9JxHCwFmF+Z6JEB1vne9FDx4GiLcGreQ=="],
-
    "expo-background-task": ["expo-background-task@1.0.10", "", { "dependencies": { "expo-task-manager": "~14.0.9" }, "peerDependencies": { "expo": "*" } }, "sha512-EbPnuf52Ps/RJiaSFwqKGT6TkvMChv7bI0wF42eADbH3J2EMm5y5Qvj0oFmF1CBOwc3mUhqj63o7Pl6OLkGPZQ=="],

    "expo-blur": ["expo-blur@15.0.8", "", { "peerDependencies": { "expo": "*", "react": "*", "react-native": "*" } }, "sha512-rWyE1NBRZEu9WD+X+5l7gyPRszw7n12cW3IRNAb5i6KFzaBp8cxqT5oeaphJapqURvcqhkOZn2k5EtBSbsuU7w=="],
--- a/components/Button.tsx
+++ b/components/Button.tsx
@@ -132,7 +132,7 @@ export const Button: React.FC<PropsWithChildren<ButtonProps>> = ({
      <Animated.View
        style={{
          transform: [{ scale }],
-          shadowColor: "#ffffff",
+          shadowColor: color === "black" ? "#ffffff" : "#a855f7",
          shadowOffset: { width: 0, height: 0 },
          shadowOpacity: focused ? 0.5 : 0,
          shadowRadius: focused ? 10 : 0,
--- a/components/ContinueWatchingPoster.tv.tsx
+++ b/components/ContinueWatchingPoster.tv.tsx
@@ -0,0 +1,188 @@
+import { Ionicons } from "@expo/vector-icons";
+import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import { Image } from "expo-image";
+import { useAtomValue } from "jotai";
+import type React from "react";
+import { useMemo } from "react";
+import { View } from "react-native";
+import {
+  GlassPosterView,
+  isGlassEffectAvailable,
+} from "@/modules/glass-poster";
+import { apiAtom } from "@/providers/JellyfinProvider";
+import { ProgressBar } from "./common/ProgressBar";
+import { WatchedIndicator } from "./WatchedIndicator";
+
+export const TV_LANDSCAPE_WIDTH = 400;
+
+type ContinueWatchingPosterProps = {
+  item: BaseItemDto;
+  useEpisodePoster?: boolean;
+  size?: "small" | "normal";
+  showPlayButton?: boolean;
+};
+
+const ContinueWatchingPoster: React.FC<ContinueWatchingPosterProps> = ({
+  item,
+  useEpisodePoster = false,
+  // TV version uses fixed width, size prop kept for API compatibility
+  size: _size = "normal",
+  showPlayButton = false,
+}) => {
+  const api = useAtomValue(apiAtom);
+
+  const url = useMemo(() => {
+    if (!api) {
+      return;
+    }
+    if (item.Type === "Episode" && useEpisodePoster) {
+      return `${api?.basePath}/Items/${item.Id}/Images/Primary?fillHeight=700&quality=80`;
+    }
+    if (item.Type === "Episode") {
+      if (item.ParentBackdropItemId && item.ParentThumbImageTag) {
+        return `${api?.basePath}/Items/${item.ParentBackdropItemId}/Images/Thumb?fillHeight=700&quality=80&tag=${item.ParentThumbImageTag}`;
+      }
+      return `${api?.basePath}/Items/${item.Id}/Images/Primary?fillHeight=700&quality=80`;
+    }
+    if (item.Type === "Movie") {
+      if (item.ImageTags?.Thumb) {
+        return `${api?.basePath}/Items/${item.Id}/Images/Thumb?fillHeight=700&quality=80&tag=${item.ImageTags?.Thumb}`;
+      }
+      return `${api?.basePath}/Items/${item.Id}/Images/Primary?fillHeight=700&quality=80`;
+    }
+    if (item.Type === "Program") {
+      if (item.ImageTags?.Thumb) {
+        return `${api?.basePath}/Items/${item.Id}/Images/Thumb?fillHeight=700&quality=80&tag=${item.ImageTags?.Thumb}`;
+      }
+      return `${api?.basePath}/Items/${item.Id}/Images/Primary?fillHeight=700&quality=80`;
+    }
+
+    if (item.ImageTags?.Thumb) {
+      return `${api?.basePath}/Items/${item.Id}/Images/Thumb?fillHeight=700&quality=80&tag=${item.ImageTags?.Thumb}`;
+    }
+
+    return `${api?.basePath}/Items/${item.Id}/Images/Primary?fillHeight=700&quality=80`;
+  }, [api, item, useEpisodePoster]);
+
+  const progress = useMemo(() => {
+    if (item.Type === "Program") {
+      if (!item.StartDate || !item.EndDate) {
+        return 0;
+      }
+      const startDate = new Date(item.StartDate);
+      const endDate = new Date(item.EndDate);
+      const now = new Date();
+      const total = endDate.getTime() - startDate.getTime();
+      if (total <= 0) {
+        return 0;
+      }
+      const elapsed = now.getTime() - startDate.getTime();
+      return (elapsed / total) * 100;
+    }
+    return item.UserData?.PlayedPercentage || 0;
+  }, [item]);
+
+  const isWatched = item.UserData?.Played === true;
+
+  // Use glass effect on tvOS 26+
+  const useGlass = isGlassEffectAvailable();
+
+  if (!url) {
+    return (
+      <View
+        style={{
+          width: TV_LANDSCAPE_WIDTH,
+          aspectRatio: 16 / 9,
+          borderRadius: 24,
+        }}
+      />
+    );
+  }
+
+  if (useGlass) {
+    return (
+      <View style={{ position: "relative" }}>
+        <GlassPosterView
+          imageUrl={url}
+          aspectRatio={16 / 9}
+          cornerRadius={24}
+          progress={progress}
+          showWatchedIndicator={isWatched}
+          isFocused={false}
+          width={TV_LANDSCAPE_WIDTH}
+          style={{ width: TV_LANDSCAPE_WIDTH }}
+        />
+        {showPlayButton && (
+          <View
+            style={{
+              position: "absolute",
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              alignItems: "center",
+              justifyContent: "center",
+            }}
+          >
+            <Ionicons name='play-circle' size={56} color='white' />
+          </View>
+        )}
+      </View>
+    );
+  }
+
+  // Fallback for older tvOS versions
+  return (
+    <View
+      style={{
+        position: "relative",
+        width: TV_LANDSCAPE_WIDTH,
+        aspectRatio: 16 / 9,
+        borderRadius: 24,
+        overflow: "hidden",
+      }}
+    >
+      <View
+        style={{
+          width: "100%",
+          height: "100%",
+          alignItems: "center",
+          justifyContent: "center",
+        }}
+      >
+        <Image
+          key={item.Id}
+          id={item.Id}
+          source={{
+            uri: url,
+          }}
+          cachePolicy={"memory-disk"}
+          contentFit='cover'
+          style={{
+            width: "100%",
+            height: "100%",
+          }}
+        />
+        {showPlayButton && (
+          <View
+            style={{
+              position: "absolute",
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              alignItems: "center",
+              justifyContent: "center",
+            }}
+          >
+            <Ionicons name='play-circle' size={56} color='white' />
+          </View>
+        )}
+      </View>
+      <WatchedIndicator item={item} />
+      <ProgressBar item={item} />
+    </View>
+  );
+};
+
+export default ContinueWatchingPoster;
--- a/components/DownloadItem.tsx
+++ b/components/DownloadItem.tsx
@@ -73,16 +73,12 @@ export const DownloadItems: React.FC<DownloadProps> = ({
    SelectedOptions | undefined
  >(undefined);

-  const playSettingsOptions = useMemo(
-    () => ({ applyLanguagePreferences: true }),
-    [],
-  );
  const {
    defaultAudioIndex,
    defaultBitrate,
    defaultMediaSource,
    defaultSubtitleIndex,
-  } = useDefaultPlaySettings(items[0], settings, playSettingsOptions);
+  } = useDefaultPlaySettings(items[0], settings);

  const userCanDownload = useMemo(
    () => user?.Policy?.EnableContentDownloading,
--- a/components/ItemContent.tsx
+++ b/components/ItemContent.tsx
@@ -75,20 +75,12 @@ const ItemContentMobile: React.FC<ItemContentProps> = ({
  >(undefined);

  // Use itemWithSources for play settings since it has MediaSources data
-  const playSettingsOptions = useMemo(
-    () => ({ applyLanguagePreferences: true }),
-    [],
-  );
  const {
    defaultAudioIndex,
    defaultBitrate,
    defaultMediaSource,
    defaultSubtitleIndex,
-  } = useDefaultPlaySettings(
-    itemWithSources ?? item,
-    settings,
-    playSettingsOptions,
-  );
+  } = useDefaultPlaySettings(itemWithSources ?? item, settings);

  const logoUrl = useMemo(
    () => (item ? getLogoImageUrlById({ api, item }) : null),
--- a/components/ItemContent.tv.tsx
+++ b/components/ItemContent.tv.tsx
@@ -7,7 +7,6 @@ import type {
 import { getTvShowsApi, getUserLibraryApi } from "@jellyfin/sdk/lib/utils/api";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { BlurView } from "expo-blur";
-import { File } from "expo-file-system";
 import { Image } from "expo-image";
 import { useAtom } from "jotai";
 import React, {
@@ -18,14 +17,14 @@ import React, {
  useState,
 } from "react";
 import { useTranslation } from "react-i18next";
-import { Alert, Dimensions, ScrollView, View } from "react-native";
+import { Dimensions, ScrollView, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { BITRATES, type Bitrate } from "@/components/BitrateSelector";
 import { ItemImage } from "@/components/common/ItemImage";
 import { Text } from "@/components/common/Text";
 import { getItemNavigation } from "@/components/common/TouchableItemRouter";
 import { GenreTags } from "@/components/GenreTags";
-import { TVEpisodeList } from "@/components/series/TVEpisodeList";
+import { TVEpisodeCard } from "@/components/series/TVEpisodeCard";
 import {
  TVBackdrop,
  TVButton,
@@ -34,7 +33,6 @@ import {
  TVFavoriteButton,
  TVMetadataBadges,
  TVOptionButton,
-  TVPlayedButton,
  TVProgressBar,
  TVRefreshButton,
  TVSeriesNavigation,
@@ -45,18 +43,15 @@ import { useScaledTVTypography } from "@/constants/TVTypography";
 import useRouter from "@/hooks/useAppRouter";
 import useDefaultPlaySettings from "@/hooks/useDefaultPlaySettings";
 import { useImageColorsReturn } from "@/hooks/useImageColorsReturn";
-import { useTVItemActionModal } from "@/hooks/useTVItemActionModal";
 import { useTVOptionModal } from "@/hooks/useTVOptionModal";
 import { useTVSubtitleModal } from "@/hooks/useTVSubtitleModal";
-import { useTVThemeMusic } from "@/hooks/useTVThemeMusic";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { useOfflineMode } from "@/providers/OfflineModeProvider";
-import { getSubtitlesForItem } from "@/utils/atoms/downloadedSubtitles";
 import { useSettings } from "@/utils/atoms/settings";
 import type { TVOptionItem } from "@/utils/atoms/tvOptionModal";
 import { getLogoImageUrlById } from "@/utils/jellyfin/image/getLogoImageUrlById";
 import { getPrimaryImageUrlById } from "@/utils/jellyfin/image/getPrimaryImageUrlById";
-import { formatDuration, runtimeTicksToMinutes } from "@/utils/time";
+import { runtimeTicksToMinutes } from "@/utils/time";

 const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get("window");

@@ -83,15 +78,11 @@ export const ItemContentTV: React.FC<ItemContentTVProps> = React.memo(
    const { settings } = useSettings();
    const insets = useSafeAreaInsets();
    const router = useRouter();
-    const { showItemActions } = useTVItemActionModal();
    const { t } = useTranslation();
    const queryClient = useQueryClient();

    const _itemColors = useImageColorsReturn({ item });

-    // Auto-play theme music (handles fade in/out and cleanup)
-    useTVThemeMusic(item?.Id);
-
    // State for first episode card ref (used for focus guide)
    const [_firstEpisodeRef, setFirstEpisodeRef] = useState<View | null>(null);

@@ -121,22 +112,12 @@ export const ItemContentTV: React.FC<ItemContentTVProps> = React.memo(
      SelectedOptions | undefined
    >(undefined);

-    // Enable language preference application for TV
-    const playSettingsOptions = useMemo(
-      () => ({ applyLanguagePreferences: true }),
-      [],
-    );
-
    const {
      defaultAudioIndex,
      defaultBitrate,
      defaultMediaSource,
      defaultSubtitleIndex,
-    } = useDefaultPlaySettings(
-      itemWithSources ?? item,
-      settings,
-      playSettingsOptions,
-    );
+    } = useDefaultPlaySettings(itemWithSources ?? item, settings);

    const logoUrl = useMemo(
      () => (item ? getLogoImageUrlById({ api, item }) : null),
@@ -158,59 +139,21 @@ export const ItemContentTV: React.FC<ItemContentTVProps> = React.memo(
      defaultMediaSource,
    ]);

-    const navigateToPlayer = useCallback(
-      (playbackPosition: string) => {
-        if (!item || !selectedOptions) return;
-
-        const queryParams = new URLSearchParams({
-          itemId: item.Id!,
-          audioIndex: selectedOptions.audioIndex?.toString() ?? "",
-          subtitleIndex: selectedOptions.subtitleIndex?.toString() ?? "",
-          mediaSourceId: selectedOptions.mediaSource?.Id ?? "",
-          bitrateValue: selectedOptions.bitrate?.value?.toString() ?? "",
-          playbackPosition,
-          offline: isOffline ? "true" : "false",
-        });
-
-        router.push(`/player/direct-player?${queryParams.toString()}`);
-      },
-      [item, selectedOptions, isOffline, router],
-    );
-
    const handlePlay = () => {
      if (!item || !selectedOptions) return;

-      const hasPlaybackProgress =
-        (item.UserData?.PlaybackPositionTicks ?? 0) > 0;
+      const queryParams = new URLSearchParams({
+        itemId: item.Id!,
+        audioIndex: selectedOptions.audioIndex?.toString() ?? "",
+        subtitleIndex: selectedOptions.subtitleIndex?.toString() ?? "",
+        mediaSourceId: selectedOptions.mediaSource?.Id ?? "",
+        bitrateValue: selectedOptions.bitrate?.value?.toString() ?? "",
+        playbackPosition:
+          item.UserData?.PlaybackPositionTicks?.toString() ?? "0",
+        offline: isOffline ? "true" : "false",
+      });

-      if (hasPlaybackProgress) {
-        Alert.alert(
-          t("item_card.resume_playback"),
-          t("item_card.resume_playback_description"),
-          [
-            {
-              text: t("common.cancel"),
-              style: "cancel",
-            },
-            {
-              text: t("item_card.play_from_start"),
-              onPress: () => navigateToPlayer("0"),
-            },
-            {
-              text: t("item_card.continue_from", {
-                time: formatDuration(item.UserData?.PlaybackPositionTicks),
-              }),
-              onPress: () =>
-                navigateToPlayer(
-                  item.UserData?.PlaybackPositionTicks?.toString() ?? "0",
-                ),
-              isPreferred: true,
-            },
-          ],
-        );
-      } else {
-        navigateToPlayer("0");
-      }
+      router.push(`/player/direct-player?${queryParams.toString()}`);
    };

    // TV Option Modal hook for quality, audio, media source selectors
@@ -224,6 +167,10 @@ export const ItemContentTV: React.FC<ItemContentTVProps> = React.memo(
      null,
    );

+    // State for last option button ref (used for upward focus guide from cast)
+    const [_lastOptionButtonRef, setLastOptionButtonRef] =
+      useState<View | null>(null);
+
    // Get available audio tracks
    const audioTracks = useMemo(() => {
      const streams = selectedOptions?.mediaSource?.MediaStreams?.filter(
@@ -245,16 +192,9 @@ export const ItemContentTV: React.FC<ItemContentTVProps> = React.memo(
      null,
    );

-    // State to trigger refresh of local subtitles list
-    const [localSubtitlesRefreshKey, setLocalSubtitlesRefreshKey] = useState(0);
-
-    // Starting index for local (client-downloaded) subtitles
-    const LOCAL_SUBTITLE_INDEX_START = -100;
-
    // Convert MediaStream[] to Track[] for the modal (with setTrack callbacks)
-    // Also includes locally downloaded subtitles from OpenSubtitles
    const subtitleTracksForModal = useMemo((): Track[] => {
-      const tracks: Track[] = subtitleStreams.map((stream) => ({
+      return subtitleStreams.map((stream) => ({
        name:
          stream.DisplayTitle ||
          `${stream.Language || "Unknown"} (${stream.Codec})`,
@@ -263,37 +203,7 @@ export const ItemContentTV: React.FC<ItemContentTVProps> = React.memo(
          handleSubtitleChangeRef.current?.(stream.Index ?? -1);
        },
      }));
-
-      // Add locally downloaded subtitles (from OpenSubtitles)
-      if (item?.Id) {
-        const localSubs = getSubtitlesForItem(item.Id);
-        let localIdx = 0;
-        for (const localSub of localSubs) {
-          // Verify file still exists (cache may have been cleared)
-          const subtitleFile = new File(localSub.filePath);
-          if (!subtitleFile.exists) {
-            continue;
-          }
-
-          const localIndex = LOCAL_SUBTITLE_INDEX_START - localIdx;
-          tracks.push({
-            name: localSub.name,
-            index: localIndex,
-            isLocal: true,
-            localPath: localSub.filePath,
-            setTrack: () => {
-              // For ItemContent (outside player), just update the selected index
-              // The actual subtitle will be loaded when playback starts
-              handleSubtitleChangeRef.current?.(localIndex);
-            },
-          });
-          localIdx++;
-        }
-      }
-
-      return tracks;
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [subtitleStreams, item?.Id, localSubtitlesRefreshKey]);
+    }, [subtitleStreams]);

    // Get available media sources
    const mediaSources = useMemo(() => {
@@ -385,12 +295,6 @@ export const ItemContentTV: React.FC<ItemContentTVProps> = React.memo(
      }
    }, [item?.Id, queryClient]);

-    // Handle local subtitle download - trigger refresh of subtitle tracks
-    const handleLocalSubtitleDownloaded = useCallback((_path: string) => {
-      // Increment the refresh key to trigger re-computation of subtitleTracksForModal
-      setLocalSubtitlesRefreshKey((prev) => prev + 1);
-    }, []);
-
    // Refresh subtitle tracks by fetching fresh item data from Jellyfin
    const refreshSubtitleTracks = useCallback(async (): Promise<Track[]> => {
      if (!api || !item?.Id) return [];
@@ -418,7 +322,7 @@ export const ItemContentTV: React.FC<ItemContentTVProps> = React.memo(
          ) ?? [];

        // Convert to Track[] with setTrack callbacks
-        const tracks: Track[] = streams.map((stream) => ({
+        return streams.map((stream) => ({
          name:
            stream.DisplayTitle ||
            `${stream.Language || "Unknown"} (${stream.Codec})`,
@@ -427,30 +331,6 @@ export const ItemContentTV: React.FC<ItemContentTVProps> = React.memo(
            handleSubtitleChangeRef.current?.(stream.Index ?? -1);
          },
        }));
-
-        // Add locally downloaded subtitles
-        if (item?.Id) {
-          const localSubs = getSubtitlesForItem(item.Id);
-          let localIdx = 0;
-          for (const localSub of localSubs) {
-            const subtitleFile = new File(localSub.filePath);
-            if (!subtitleFile.exists) continue;
-
-            const localIndex = LOCAL_SUBTITLE_INDEX_START - localIdx;
-            tracks.push({
-              name: localSub.name,
-              index: localIndex,
-              isLocal: true,
-              localPath: localSub.filePath,
-              setTrack: () => {
-                handleSubtitleChangeRef.current?.(localIndex);
-              },
-            });
-            localIdx++;
-          }
-        }
-
-        return tracks;
      } catch (error) {
        console.error("Failed to refresh subtitle tracks:", error);
        return [];
@@ -468,30 +348,13 @@ export const ItemContentTV: React.FC<ItemContentTVProps> = React.memo(
    const selectedSubtitleLabel = useMemo(() => {
      if (selectedOptions?.subtitleIndex === -1)
        return t("item_card.subtitles.none");
-
-      // Check if it's a local subtitle (negative index starting at -100)
-      if (
-        selectedOptions?.subtitleIndex !== undefined &&
-        selectedOptions.subtitleIndex <= LOCAL_SUBTITLE_INDEX_START
-      ) {
-        const localTrack = subtitleTracksForModal.find(
-          (t) => t.index === selectedOptions.subtitleIndex,
-        );
-        return localTrack?.name || t("item_card.subtitles.label");
-      }
-
      const track = subtitleStreams.find(
        (t) => t.Index === selectedOptions?.subtitleIndex,
      );
      return (
        track?.DisplayTitle || track?.Language || t("item_card.subtitles.label")
      );
-    }, [
-      subtitleStreams,
-      subtitleTracksForModal,
-      selectedOptions?.subtitleIndex,
-      t,
-    ]);
+    }, [subtitleStreams, selectedOptions?.subtitleIndex, t]);

    const selectedMediaSourceLabel = useMemo(() => {
      const source = selectedOptions?.mediaSource;
@@ -562,6 +425,25 @@ export const ItemContentTV: React.FC<ItemContentTVProps> = React.memo(
      return `${api.basePath}/Items/${item.SeriesId}/Images/Thumb?fillHeight=700&quality=80`;
    }, [api, item]);

+    // Determine which option button is the last one (for focus guide targeting)
+    const lastOptionButton = useMemo(() => {
+      const hasSubtitleOption =
+        subtitleStreams.length > 0 ||
+        selectedOptions?.subtitleIndex !== undefined;
+      const hasAudioOption = audioTracks.length > 0;
+      const hasMediaSourceOption = mediaSources.length > 1;
+
+      if (hasSubtitleOption) return "subtitle";
+      if (hasAudioOption) return "audio";
+      if (hasMediaSourceOption) return "mediaSource";
+      return "quality";
+    }, [
+      subtitleStreams.length,
+      selectedOptions?.subtitleIndex,
+      audioTracks.length,
+      mediaSources.length,
+    ]);
+
    // Navigation handlers
    const handleActorPress = useCallback(
      (personId: string) => {
@@ -587,7 +469,7 @@ export const ItemContentTV: React.FC<ItemContentTVProps> = React.memo(
    const handleEpisodePress = useCallback(
      (episode: BaseItemDto) => {
        const navigation = getItemNavigation(episode, "(home)");
-        router.replace(navigation as any);
+        router.push(navigation as any);
      },
      [router],
    );
@@ -752,24 +634,27 @@ export const ItemContentTV: React.FC<ItemContentTVProps> = React.memo(
                  </Text>
                </TVButton>
                <TVFavoriteButton item={item} />
-                <TVPlayedButton item={item} />
                <TVRefreshButton itemId={item.Id} />
              </View>

              {/* Playback options */}
              <View
                style={{
-                  flexDirection: "row",
-                  alignItems: "center",
-                  gap: 12,
+                  flexDirection: "column",
+                  alignItems: "flex-start",
+                  gap: 10,
                  marginBottom: 24,
                }}
              >
                {/* Quality selector */}
                <TVOptionButton
+                  ref={
+                    lastOptionButton === "quality"
+                      ? setLastOptionButtonRef
+                      : undefined
+                  }
                  label={t("item_card.quality")}
                  value={selectedQualityLabel}
-                  maxWidth={200}
                  onPress={() =>
                    showOptions({
                      title: t("item_card.quality"),
@@ -782,9 +667,13 @@ export const ItemContentTV: React.FC<ItemContentTVProps> = React.memo(
                {/* Media source selector (only if multiple sources) */}
                {mediaSources.length > 1 && (
                  <TVOptionButton
+                    ref={
+                      lastOptionButton === "mediaSource"
+                        ? setLastOptionButtonRef
+                        : undefined
+                    }
                    label={t("item_card.video")}
                    value={selectedMediaSourceLabel}
-                    maxWidth={280}
                    onPress={() =>
                      showOptions({
                        title: t("item_card.video"),
@@ -798,9 +687,13 @@ export const ItemContentTV: React.FC<ItemContentTVProps> = React.memo(
                {/* Audio selector */}
                {audioTracks.length > 0 && (
                  <TVOptionButton
+                    ref={
+                      lastOptionButton === "audio"
+                        ? setLastOptionButtonRef
+                        : undefined
+                    }
                    label={t("item_card.audio")}
                    value={selectedAudioLabel}
-                    maxWidth={280}
                    onPress={() =>
                      showOptions({
                        title: t("item_card.audio"),
@@ -815,9 +708,13 @@ export const ItemContentTV: React.FC<ItemContentTVProps> = React.memo(
                {(subtitleStreams.length > 0 ||
                  selectedOptions?.subtitleIndex !== undefined) && (
                  <TVOptionButton
+                    ref={
+                      lastOptionButton === "subtitle"
+                        ? setLastOptionButtonRef
+                        : undefined
+                    }
                    label={t("item_card.subtitles.label")}
                    value={selectedSubtitleLabel}
-                    maxWidth={280}
                    onPress={() =>
                      showSubtitleModal({
                        item,
@@ -828,8 +725,6 @@ export const ItemContentTV: React.FC<ItemContentTVProps> = React.memo(
                        onDisableSubtitles: () => handleSubtitleChange(-1),
                        onServerSubtitleDownloaded:
                          handleServerSubtitleDownloaded,
-                        onLocalSubtitleDownloaded:
-                          handleLocalSubtitleDownloaded,
                        refreshSubtitleTracks,
                      })
                    }
@@ -911,13 +806,26 @@ export const ItemContentTV: React.FC<ItemContentTVProps> = React.memo(
                  {t("item_card.more_from_this_season")}
                </Text>

-                <TVEpisodeList
-                  episodes={seasonEpisodes}
-                  currentEpisodeId={item.Id}
-                  onEpisodePress={handleEpisodePress}
-                  onEpisodeLongPress={showItemActions}
-                  firstEpisodeRefSetter={setFirstEpisodeRef}
-                />
+                <ScrollView
+                  horizontal
+                  showsHorizontalScrollIndicator={false}
+                  style={{ marginHorizontal: -80, overflow: "visible" }}
+                  contentContainerStyle={{
+                    paddingHorizontal: 80,
+                    paddingVertical: 12,
+                    gap: 24,
+                  }}
+                >
+                  {seasonEpisodes.map((episode, index) => (
+                    <TVEpisodeCard
+                      key={episode.Id}
+                      episode={episode}
+                      onPress={() => handleEpisodePress(episode)}
+                      disabled={episode.Id === item.Id}
+                      refSetter={index === 0 ? setFirstEpisodeRef : undefined}
+                    />
+                  ))}
+                </ScrollView>
              </View>
            )}

--- a/components/PasswordEntryModal.tsx
+++ b/components/PasswordEntryModal.tsx
@@ -128,7 +128,7 @@ export const PasswordEntryModal: React.FC<PasswordEntryModalProps> = ({
          {/* Password Input */}
          <View className='p-4 border border-neutral-800 rounded-xl bg-neutral-900 mb-4'>
            <Text className='text-neutral-400 text-sm mb-2'>
-              {t("login.password_placeholder")}
+              {t("login.password")}
            </Text>
            <BottomSheetTextInput
              value={password}
@@ -136,7 +136,7 @@ export const PasswordEntryModal: React.FC<PasswordEntryModalProps> = ({
                setPassword(text);
                setError(null);
              }}
-              placeholder={t("login.password_placeholder")}
+              placeholder={t("login.password")}
              placeholderTextColor='#6B7280'
              secureTextEntry
              autoFocus
@@ -174,7 +174,7 @@ export const PasswordEntryModal: React.FC<PasswordEntryModalProps> = ({
              {isLoading ? (
                <ActivityIndicator size='small' color='white' />
              ) : (
-                t("common.login")
+                t("login.login")
              )}
            </Button>
          </View>
--- a/components/PlayButton.tsx
+++ b/components/PlayButton.tsx
@@ -35,9 +35,9 @@ import { useSettings } from "@/utils/atoms/settings";
 import { getParentBackdropImageUrl } from "@/utils/jellyfin/image/getParentBackdropImageUrl";
 import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
 import { getStreamUrl } from "@/utils/jellyfin/media/getStreamUrl";
+import { chromecast } from "@/utils/profiles/chromecast";
+import { chromecasth265 } from "@/utils/profiles/chromecasth265";
 import { runtimeTicksToMinutes } from "@/utils/time";
-import { chromecast } from "../utils/profiles/chromecast";
-import { chromecasth265 } from "../utils/profiles/chromecasth265";
 import { Button } from "./Button";
 import { Text } from "./common/Text";
 import type { SelectedOptions } from "./ItemContent";
--- a/components/PreviousServersList.tsx
+++ b/components/PreviousServersList.tsx
@@ -73,19 +73,10 @@ export const PreviousServersList: React.FC<PreviousServersListProps> = ({
          setLoadingServer(server.address);
          try {
            await onQuickLogin(server.address, account.userId);
-          } catch (error) {
-            const errorMessage =
-              error instanceof Error
-                ? error.message
-                : t("server.session_expired");
-            const isSessionExpired = errorMessage.includes(
-              t("server.session_expired"),
-            );
+          } catch {
            Alert.alert(
-              isSessionExpired
-                ? t("server.session_expired")
-                : t("login.connection_failed"),
-              isSessionExpired ? t("server.please_login_again") : errorMessage,
+              t("server.session_expired"),
+              t("server.please_login_again"),
              [{ text: t("common.ok"), onPress: () => onServerSelect(server) }],
            );
          } finally {
@@ -131,17 +122,10 @@ export const PreviousServersList: React.FC<PreviousServersListProps> = ({
      setLoadingServer(selectedServer.address);
      try {
        await onQuickLogin(selectedServer.address, selectedAccount.userId);
-      } catch (error) {
-        const errorMessage =
-          error instanceof Error ? error.message : t("server.session_expired");
-        const isSessionExpired = errorMessage.includes(
-          t("server.session_expired"),
-        );
+      } catch {
        Alert.alert(
-          isSessionExpired
-            ? t("server.session_expired")
-            : t("login.connection_failed"),
-          isSessionExpired ? t("server.please_login_again") : errorMessage,
+          t("server.session_expired"),
+          t("server.please_login_again"),
          [
            {
              text: t("common.ok"),
--- a/components/common/TouchableItemRouter.tsx
+++ b/components/common/TouchableItemRouter.tsx
@@ -2,11 +2,7 @@ import { useActionSheet } from "@expo/react-native-action-sheet";
 import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import { useSegments } from "expo-router";
 import { type PropsWithChildren, useCallback } from "react";
-import {
-  Platform,
-  TouchableOpacity,
-  type TouchableOpacityProps,
-} from "react-native";
+import { TouchableOpacity, type TouchableOpacityProps } from "react-native";
 import useRouter from "@/hooks/useAppRouter";
 import { useFavorite } from "@/hooks/useFavorite";
 import { useMarkAsPlayed } from "@/hooks/useMarkAsPlayed";
@@ -125,12 +121,6 @@ export const getItemNavigation = (item: BaseItemDto, _from: string) => {
  }

  if (item.Type === "Playlist") {
-    if (Platform.isTV) {
-      return {
-        pathname: "/[libraryId]" as const,
-        params: { libraryId: item.Id! },
-      };
-    }
    return {
      pathname: "/music/playlist/[playlistId]" as const,
      params: { playlistId: item.Id! },
--- a/components/home/Favorites.tv.tsx
+++ b/components/home/Favorites.tv.tsx
@@ -178,6 +178,8 @@ export const Favorites = () => {
      contentContainerStyle={{
        paddingTop: insets.top + TOP_PADDING,
        paddingBottom: insets.bottom + 60,
+        paddingLeft: insets.left + HORIZONTAL_PADDING,
+        paddingRight: insets.right + HORIZONTAL_PADDING,
      }}
    >
      <View style={{ gap: SECTION_GAP }}>
--- a/components/home/Home.tv.tsx
+++ b/components/home/Home.tv.tsx
@@ -36,7 +36,6 @@ import { useScaledTVTypography } from "@/constants/TVTypography";
 import useRouter from "@/hooks/useAppRouter";
 import { useNetworkStatus } from "@/hooks/useNetworkStatus";
 import { useInvalidatePlaybackProgressCache } from "@/hooks/useRevalidatePlaybackProgressCache";
-import { useTVItemActionModal } from "@/hooks/useTVItemActionModal";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { useSettings } from "@/utils/atoms/settings";
 import { getBackdropUrl } from "@/utils/jellyfin/image/getBackdropUrl";
@@ -53,6 +52,7 @@ type InfiniteScrollingCollectionListSection = {
  queryFn: QueryFunction<BaseItemDto[], any, number>;
  orientation?: "horizontal" | "vertical";
  pageSize?: number;
+  priority?: 1 | 2;
  parentId?: string;
 };

@@ -77,7 +77,7 @@ export const Home = () => {
    retryCheck,
  } = useNetworkStatus();
  const _invalidateCache = useInvalidatePlaybackProgressCache();
-  const { showItemActions } = useTVItemActionModal();
+  const [loadedSections, setLoadedSections] = useState<Set<string>>(new Set());

  // Dynamic backdrop state with debounce
  const [focusedItem, setFocusedItem] = useState<BaseItemDto | null>(null);
@@ -250,7 +250,7 @@ export const Home = () => {
        deduped.push(item);
      }

-      return deduped.slice(0, 15);
+      return deduped.slice(0, 8);
    },
    enabled: !!api && !!user?.Id,
    staleTime: 60 * 1000,
@@ -381,6 +381,7 @@ export const Home = () => {
            type: "InfiniteScrollingCollectionList",
            orientation: "horizontal",
            pageSize: 10,
+            priority: 1,
          },
        ]
      : [
@@ -400,6 +401,7 @@ export const Home = () => {
            type: "InfiniteScrollingCollectionList",
            orientation: "horizontal",
            pageSize: 10,
+            priority: 1,
          },
          {
            title: t("home.next_up"),
@@ -417,12 +419,13 @@ export const Home = () => {
            type: "InfiniteScrollingCollectionList",
            orientation: "horizontal",
            pageSize: 10,
+            priority: 1,
          },
        ];

    const ss: Section[] = [
      ...firstSections,
-      ...latestMediaViews,
+      ...latestMediaViews.map((s) => ({ ...s, priority: 2 as const })),
      ...(!settings?.streamyStatsMovieRecommendations
        ? [
            {
@@ -441,6 +444,7 @@ export const Home = () => {
              type: "InfiniteScrollingCollectionList" as const,
              orientation: "vertical" as const,
              pageSize: 10,
+              priority: 2 as const,
            },
          ]
        : []),
@@ -525,6 +529,7 @@ export const Home = () => {
        type: "InfiniteScrollingCollectionList",
        orientation: section?.orientation || "vertical",
        pageSize,
+        priority: index < 2 ? 1 : 2,
      });
    });
    return ss;
@@ -532,21 +537,23 @@ export const Home = () => {

  const sections = settings?.home?.sections ? customSections : defaultSections;

-  // Determine if hero should be shown (separate setting from backdrop)
-  // We need this early to calculate which sections will actually be rendered
-  const showHero = useMemo(() => {
-    return heroItems && heroItems.length > 0 && settings.showTVHeroCarousel;
-  }, [heroItems, settings.showTVHeroCarousel]);
+  const highPrioritySectionKeys = useMemo(() => {
+    return sections
+      .filter((s) => s.priority === 1)
+      .map((s) => s.queryKey.join("-"));
+  }, [sections]);

-  // Get sections that will actually be rendered (accounting for hero slicing)
-  // When hero is shown, skip the first sections since hero already displays that content
-  // - If mergeNextUpAndContinueWatching: skip 1 section (combined Continue & Next Up)
-  // - Otherwise: skip 2 sections (separate Continue Watching + Next Up)
-  const renderedSections = useMemo(() => {
-    if (!showHero) return sections;
-    const sectionsToSkip = settings.mergeNextUpAndContinueWatching ? 1 : 2;
-    return sections.slice(sectionsToSkip);
-  }, [sections, showHero, settings.mergeNextUpAndContinueWatching]);
+  const allHighPriorityLoaded = useMemo(() => {
+    return highPrioritySectionKeys.every((key) => loadedSections.has(key));
+  }, [highPrioritySectionKeys, loadedSections]);
+
+  const markSectionLoaded = useCallback(
+    (queryKey: (string | undefined | null)[]) => {
+      const key = queryKey.join("-");
+      setLoadedSections((prev) => new Set(prev).add(key));
+    },
+    [],
+  );

  if (!isConnected || serverConnected !== true) {
    let title = "";
@@ -654,6 +661,10 @@ export const Home = () => {
      </View>
    );

+  // Determine if hero should be shown (separate setting from backdrop)
+  const showHero =
+    heroItems && heroItems.length > 0 && settings.showTVHeroCarousel;
+
  return (
    <View style={{ flex: 1, backgroundColor: "#000000" }}>
      {/* Dynamic backdrop with crossfade - only shown when hero is disabled */}
@@ -726,29 +737,28 @@ export const Home = () => {
        }}
      >
        {/* Hero Carousel - Apple TV+ style featured content */}
-        {showHero && heroItems && (
-          <TVHeroCarousel
-            items={heroItems}
-            onItemFocus={handleItemFocus}
-            onItemLongPress={showItemActions}
-          />
+        {showHero && (
+          <TVHeroCarousel items={heroItems} onItemFocus={handleItemFocus} />
        )}

        <View
          style={{
            gap: SECTION_GAP,
+            paddingHorizontal: insets.left + HORIZONTAL_PADDING,
            paddingTop: showHero ? SECTION_GAP : 0,
          }}
        >
          {/* Skip first section (Continue Watching) when hero is shown since hero displays that content */}
-          {renderedSections.map((section, index) => {
+          {sections.slice(showHero ? 1 : 0).map((section, index) => {
            // Render Streamystats sections after Recently Added sections
            // For default sections: place after Recently Added, before Suggested Movies (if present)
            // For custom sections: place at the very end
            const hasSuggestedMovies =
              !settings?.streamyStatsMovieRecommendations &&
              !settings?.home?.sections;
-            const displayedSectionsLength = renderedSections.length;
+            // Adjust index calculation to account for sliced array when hero is shown
+            const displayedSectionsLength =
+              sections.length - (showHero ? 1 : 0);
            const streamystatsIndex =
              displayedSectionsLength - 1 - (hasSuggestedMovies ? 1 : 0);
            const hasStreamystatsContent =
@@ -764,6 +774,7 @@ export const Home = () => {
                        "home.settings.plugins.streamystats.recommended_movies",
                      )}
                      type='Movie'
+                      enabled={allHighPriorityLoaded}
                      onItemFocus={handleItemFocus}
                    />
                  )}
@@ -773,11 +784,13 @@ export const Home = () => {
                        "home.settings.plugins.streamystats.recommended_series",
                      )}
                      type='Series'
+                      enabled={allHighPriorityLoaded}
                      onItemFocus={handleItemFocus}
                    />
                  )}
                  {settings.streamyStatsPromotedWatchlists && (
                    <StreamystatsPromotedWatchlists
+                      enabled={allHighPriorityLoaded}
                      onItemFocus={handleItemFocus}
                    />
                  )}
@@ -785,6 +798,7 @@ export const Home = () => {
              ) : null;

            if (section.type === "InfiniteScrollingCollectionList") {
+              const isHighPriority = section.priority === 1;
              // First section only gets preferred focus if hero is not shown
              const isFirstSection = index === 0 && !showHero;
              return (
@@ -796,6 +810,12 @@ export const Home = () => {
                    orientation={section.orientation}
                    hideIfEmpty
                    pageSize={section.pageSize}
+                    enabled={isHighPriority || allHighPriorityLoaded}
+                    onLoaded={
+                      isHighPriority
+                        ? () => markSectionLoaded(section.queryKey)
+                        : undefined
+                    }
                    isFirstSection={isFirstSection}
                    onItemFocus={handleItemFocus}
                    parentId={section.parentId}
--- a/components/home/InfiniteScrollingCollectionList.tv.tsx
+++ b/components/home/InfiniteScrollingCollectionList.tv.tsx
@@ -6,7 +6,7 @@ import {
  useInfiniteQuery,
 } from "@tanstack/react-query";
 import { useSegments } from "expo-router";
-import { useCallback, useMemo, useRef } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import {
  ActivityIndicator,
@@ -16,15 +16,19 @@ import {
 } from "react-native";
 import { Text } from "@/components/common/Text";
 import { getItemNavigation } from "@/components/common/TouchableItemRouter";
+import MoviePoster, {
+  TV_POSTER_WIDTH,
+} from "@/components/posters/MoviePoster.tv";
 import { TVFocusablePoster } from "@/components/tv/TVFocusablePoster";
-import { TVPosterCard } from "@/components/tv/TVPosterCard";
-import { useScaledTVPosterSizes } from "@/constants/TVPosterSizes";
-import { useScaledTVSizes } from "@/constants/TVSizes";
 import { useScaledTVTypography } from "@/constants/TVTypography";
 import useRouter from "@/hooks/useAppRouter";
-import { useTVItemActionModal } from "@/hooks/useTVItemActionModal";
 import { SortByOption, SortOrderOption } from "@/utils/atoms/filters";
+import ContinueWatchingPoster, {
+  TV_LANDSCAPE_WIDTH,
+} from "../ContinueWatchingPoster.tv";
+import SeriesPoster from "../posters/SeriesPoster.tv";

+const ITEM_GAP = 24;
 // Extra padding to accommodate scale animation (1.05x) and glow shadow
 const SCALE_PADDING = 20;

@@ -38,13 +42,64 @@ interface Props extends ViewProps {
  pageSize?: number;
  onPressSeeAll?: () => void;
  enabled?: boolean;
+  onLoaded?: () => void;
  isFirstSection?: boolean;
  onItemFocus?: (item: BaseItemDto) => void;
  parentId?: string;
 }

 type Typography = ReturnType<typeof useScaledTVTypography>;
-type PosterSizes = ReturnType<typeof useScaledTVPosterSizes>;
+
+// TV-specific ItemCardText with larger fonts
+const TVItemCardText: React.FC<{
+  item: BaseItemDto;
+  typography: Typography;
+}> = ({ item, typography }) => {
+  return (
+    <View style={{ marginTop: 12, flexDirection: "column" }}>
+      {item.Type === "Episode" ? (
+        <>
+          <Text
+            numberOfLines={1}
+            style={{ fontSize: typography.callout, color: "#FFFFFF" }}
+          >
+            {item.Name}
+          </Text>
+          <Text
+            numberOfLines={1}
+            style={{
+              fontSize: typography.callout,
+              color: "#9CA3AF",
+              marginTop: 2,
+            }}
+          >
+            {`S${item.ParentIndexNumber?.toString()}:E${item.IndexNumber?.toString()}`}
+            {" - "}
+            {item.SeriesName}
+          </Text>
+        </>
+      ) : (
+        <>
+          <Text
+            numberOfLines={1}
+            style={{ fontSize: typography.callout, color: "#FFFFFF" }}
+          >
+            {item.Name}
+          </Text>
+          <Text
+            style={{
+              fontSize: typography.callout,
+              color: "#9CA3AF",
+              marginTop: 2,
+            }}
+          >
+            {item.ProductionYear}
+          </Text>
+        </>
+      )}
+    </View>
+  );
+};

 // TV-specific "See All" card for end of lists
 const TVSeeAllCard: React.FC<{
@@ -54,19 +109,10 @@ const TVSeeAllCard: React.FC<{
  onFocus?: () => void;
  onBlur?: () => void;
  typography: Typography;
-  posterSizes: PosterSizes;
-}> = ({
-  onPress,
-  orientation,
-  disabled,
-  onFocus,
-  onBlur,
-  typography,
-  posterSizes,
-}) => {
+}> = ({ onPress, orientation, disabled, onFocus, onBlur, typography }) => {
  const { t } = useTranslation();
  const width =
-    orientation === "horizontal" ? posterSizes.episode : posterSizes.poster;
+    orientation === "horizontal" ? TV_LANDSCAPE_WIDTH : TV_POSTER_WIDTH;
  const aspectRatio = orientation === "horizontal" ? 16 / 9 : 10 / 15;

  return (
@@ -119,49 +165,71 @@ export const InfiniteScrollingCollectionList: React.FC<Props> = ({
  hideIfEmpty = false,
  pageSize = 10,
  enabled = true,
+  onLoaded,
  isFirstSection = false,
  onItemFocus,
  parentId,
  ...props
 }) => {
  const typography = useScaledTVTypography();
-  const posterSizes = useScaledTVPosterSizes();
-  const sizes = useScaledTVSizes();
-  const ITEM_GAP = sizes.gaps.item;
  const effectivePageSize = Math.max(1, pageSize);
+  const hasCalledOnLoaded = useRef(false);
  const router = useRouter();
-  const { showItemActions } = useTVItemActionModal();
  const segments = useSegments();
  const from = (segments as string[])[2] || "(home)";

+  // Track focus within section for item focus/blur callbacks
  const flatListRef = useRef<FlatList<BaseItemDto>>(null);
+  const [_focusedCount, setFocusedCount] = useState(0);

-  // Pass through focus callbacks without tracking internal state
  const handleItemFocus = useCallback(
    (item: BaseItemDto) => {
+      setFocusedCount((c) => c + 1);
      onItemFocus?.(item);
    },
    [onItemFocus],
  );

-  const { data, isLoading, isFetchingNextPage, hasNextPage, fetchNextPage } =
-    useInfiniteQuery({
-      queryKey: queryKey,
-      queryFn: ({ pageParam = 0, ...context }) =>
-        queryFn({ ...context, queryKey, pageParam }),
-      getNextPageParam: (lastPage, allPages) => {
-        if (lastPage.length < effectivePageSize) {
-          return undefined;
-        }
-        return allPages.reduce((acc, page) => acc + page.length, 0);
-      },
-      initialPageParam: 0,
-      staleTime: 60 * 1000,
-      refetchInterval: 60 * 1000,
-      refetchOnWindowFocus: false,
-      refetchOnReconnect: true,
-      enabled,
-    });
+  const handleItemBlur = useCallback(() => {
+    setFocusedCount((c) => Math.max(0, c - 1));
+  }, []);
+
+  // Focus handler for See All card (doesn't need item parameter)
+  const handleSeeAllFocus = useCallback(() => {
+    setFocusedCount((c) => c + 1);
+  }, []);
+
+  const {
+    data,
+    isLoading,
+    isFetchingNextPage,
+    hasNextPage,
+    fetchNextPage,
+    isSuccess,
+  } = useInfiniteQuery({
+    queryKey: queryKey,
+    queryFn: ({ pageParam = 0, ...context }) =>
+      queryFn({ ...context, queryKey, pageParam }),
+    getNextPageParam: (lastPage, allPages) => {
+      if (lastPage.length < effectivePageSize) {
+        return undefined;
+      }
+      return allPages.reduce((acc, page) => acc + page.length, 0);
+    },
+    initialPageParam: 0,
+    staleTime: 60 * 1000,
+    refetchInterval: 60 * 1000,
+    refetchOnWindowFocus: false,
+    refetchOnReconnect: true,
+    enabled,
+  });
+
+  useEffect(() => {
+    if (isSuccess && !hasCalledOnLoaded.current && onLoaded) {
+      hasCalledOnLoaded.current = true;
+      onLoaded();
+    }
+  }, [isSuccess, onLoaded]);

  const { t } = useTranslation();

@@ -182,7 +250,7 @@ export const InfiniteScrollingCollectionList: React.FC<Props> = ({
  }, [data]);

  const itemWidth =
-    orientation === "horizontal" ? posterSizes.episode : posterSizes.poster;
+    orientation === "horizontal" ? TV_LANDSCAPE_WIDTH : TV_POSTER_WIDTH;

  const handleItemPress = useCallback(
    (item: BaseItemDto) => {
@@ -210,21 +278,79 @@ export const InfiniteScrollingCollectionList: React.FC<Props> = ({
    } as any);
  }, [router, parentId]);

+  const getItemLayout = useCallback(
+    (_data: ArrayLike<BaseItemDto> | null | undefined, index: number) => ({
+      length: itemWidth + ITEM_GAP,
+      offset: (itemWidth + ITEM_GAP) * index,
+      index,
+    }),
+    [itemWidth],
+  );
+
  const renderItem = useCallback(
    ({ item, index }: { item: BaseItemDto; index: number }) => {
      const isFirstItem = isFirstSection && index === 0;
+      const isHorizontal = orientation === "horizontal";
+
+      const renderPoster = () => {
+        if (item.Type === "Episode" && isHorizontal) {
+          return <ContinueWatchingPoster item={item} />;
+        }
+        if (item.Type === "Episode" && !isHorizontal) {
+          return <SeriesPoster item={item} />;
+        }
+        if (item.Type === "Movie" && isHorizontal) {
+          return <ContinueWatchingPoster item={item} />;
+        }
+        if (item.Type === "Movie" && !isHorizontal) {
+          return <MoviePoster item={item} />;
+        }
+        if (item.Type === "Series" && !isHorizontal) {
+          return <SeriesPoster item={item} />;
+        }
+        if (item.Type === "Series" && isHorizontal) {
+          return <ContinueWatchingPoster item={item} />;
+        }
+        if (item.Type === "Program") {
+          return <ContinueWatchingPoster item={item} />;
+        }
+        if (item.Type === "BoxSet" && !isHorizontal) {
+          return <MoviePoster item={item} />;
+        }
+        if (item.Type === "BoxSet" && isHorizontal) {
+          return <ContinueWatchingPoster item={item} />;
+        }
+        if (item.Type === "Playlist" && !isHorizontal) {
+          return <MoviePoster item={item} />;
+        }
+        if (item.Type === "Playlist" && isHorizontal) {
+          return <ContinueWatchingPoster item={item} />;
+        }
+        if (item.Type === "Video" && !isHorizontal) {
+          return <MoviePoster item={item} />;
+        }
+        if (item.Type === "Video" && isHorizontal) {
+          return <ContinueWatchingPoster item={item} />;
+        }
+        // Default fallback
+        return isHorizontal ? (
+          <ContinueWatchingPoster item={item} />
+        ) : (
+          <MoviePoster item={item} />
+        );
+      };

      return (
-        <View style={{ marginRight: ITEM_GAP }}>
-          <TVPosterCard
-            item={item}
-            orientation={orientation}
+        <View style={{ marginRight: ITEM_GAP, width: itemWidth }}>
+          <TVFocusablePoster
            onPress={() => handleItemPress(item)}
-            onLongPress={() => showItemActions(item)}
            hasTVPreferredFocus={isFirstItem}
            onFocus={() => handleItemFocus(item)}
-            width={itemWidth}
-          />
+            onBlur={handleItemBlur}
+          >
+            {renderPoster()}
+          </TVFocusablePoster>
+          <TVItemCardText item={item} typography={typography} />
        </View>
      );
    },
@@ -233,9 +359,9 @@ export const InfiniteScrollingCollectionList: React.FC<Props> = ({
      isFirstSection,
      itemWidth,
      handleItemPress,
-      showItemActions,
      handleItemFocus,
-      ITEM_GAP,
+      handleItemBlur,
+      typography,
    ],
  );

@@ -251,7 +377,7 @@ export const InfiniteScrollingCollectionList: React.FC<Props> = ({
          fontWeight: "700",
          color: "#FFFFFF",
          marginBottom: 20,
-          marginLeft: sizes.padding.horizontal,
+          marginLeft: SCALE_PADDING,
          letterSpacing: 0.5,
        }}
      >
@@ -263,7 +389,7 @@ export const InfiniteScrollingCollectionList: React.FC<Props> = ({
          style={{
            color: "#737373",
            fontSize: typography.callout,
-            marginLeft: sizes.padding.horizontal,
+            marginLeft: SCALE_PADDING,
          }}
        >
          {t("home.no_items")}
@@ -327,15 +453,12 @@ export const InfiniteScrollingCollectionList: React.FC<Props> = ({
          maxToRenderPerBatch={3}
          windowSize={5}
          removeClippedSubviews={false}
+          getItemLayout={getItemLayout}
          maintainVisibleContentPosition={{ minIndexForVisible: 0 }}
          style={{ overflow: "visible" }}
-          contentInset={{
-            left: sizes.padding.horizontal,
-            right: sizes.padding.horizontal,
-          }}
-          contentOffset={{ x: -sizes.padding.horizontal, y: 0 }}
          contentContainerStyle={{
            paddingVertical: SCALE_PADDING,
+            paddingHorizontal: SCALE_PADDING,
          }}
          ListFooterComponent={
            <View
@@ -361,8 +484,9 @@ export const InfiniteScrollingCollectionList: React.FC<Props> = ({
                  onPress={handleSeeAllPress}
                  orientation={orientation}
                  disabled={disabled}
+                  onFocus={handleSeeAllFocus}
+                  onBlur={handleItemBlur}
                  typography={typography}
-                  posterSizes={posterSizes}
                />
              )}
            </View>
--- a/components/home/StreamystatsPromotedWatchlists.tv.tsx
+++ b/components/home/StreamystatsPromotedWatchlists.tv.tsx
@@ -11,19 +11,48 @@ import { FlatList, View, type ViewProps } from "react-native";

 import { Text } from "@/components/common/Text";
 import { getItemNavigation } from "@/components/common/TouchableItemRouter";
-import { TVPosterCard } from "@/components/tv/TVPosterCard";
-import { useScaledTVPosterSizes } from "@/constants/TVPosterSizes";
-import { useScaledTVSizes } from "@/constants/TVSizes";
+import MoviePoster, {
+  TV_POSTER_WIDTH,
+} from "@/components/posters/MoviePoster.tv";
+import SeriesPoster from "@/components/posters/SeriesPoster.tv";
+import { TVFocusablePoster } from "@/components/tv/TVFocusablePoster";
 import { useScaledTVTypography } from "@/constants/TVTypography";
 import useRouter from "@/hooks/useAppRouter";
-import { useTVItemActionModal } from "@/hooks/useTVItemActionModal";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { useSettings } from "@/utils/atoms/settings";
 import { createStreamystatsApi } from "@/utils/streamystats/api";
 import type { StreamystatsWatchlist } from "@/utils/streamystats/types";

+const ITEM_GAP = 16;
 const SCALE_PADDING = 20;

+type Typography = ReturnType<typeof useScaledTVTypography>;
+
+const TVItemCardText: React.FC<{
+  item: BaseItemDto;
+  typography: Typography;
+}> = ({ item, typography }) => {
+  return (
+    <View style={{ marginTop: 12, flexDirection: "column" }}>
+      <Text
+        numberOfLines={1}
+        style={{ fontSize: typography.callout, color: "#FFFFFF" }}
+      >
+        {item.Name}
+      </Text>
+      <Text
+        style={{
+          fontSize: typography.callout,
+          color: "#9CA3AF",
+          marginTop: 2,
+        }}
+      >
+        {item.ProductionYear}
+      </Text>
+    </View>
+  );
+};
+
 interface WatchlistSectionProps extends ViewProps {
  watchlist: StreamystatsWatchlist;
  jellyfinServerId: string;
@@ -37,14 +66,10 @@ const WatchlistSection: React.FC<WatchlistSectionProps> = ({
  ...props
 }) => {
  const typography = useScaledTVTypography();
-  const posterSizes = useScaledTVPosterSizes();
-  const sizes = useScaledTVSizes();
-  const ITEM_GAP = sizes.gaps.item;
  const api = useAtomValue(apiAtom);
  const user = useAtomValue(userAtom);
  const { settings } = useSettings();
  const router = useRouter();
-  const { showItemActions } = useTVItemActionModal();
  const segments = useSegments();
  const from = (segments as string[])[2] || "(home)";

@@ -104,35 +129,30 @@ const WatchlistSection: React.FC<WatchlistSectionProps> = ({

  const getItemLayout = useCallback(
    (_data: ArrayLike<BaseItemDto> | null | undefined, index: number) => ({
-      length: posterSizes.poster + ITEM_GAP,
-      offset: (posterSizes.poster + ITEM_GAP) * index,
+      length: TV_POSTER_WIDTH + ITEM_GAP,
+      offset: (TV_POSTER_WIDTH + ITEM_GAP) * index,
      index,
    }),
-    [posterSizes.poster, ITEM_GAP],
+    [],
  );

  const renderItem = useCallback(
    ({ item }: { item: BaseItemDto }) => {
      return (
-        <View style={{ marginRight: ITEM_GAP }}>
-          <TVPosterCard
-            item={item}
-            orientation='vertical'
+        <View style={{ marginRight: ITEM_GAP, width: TV_POSTER_WIDTH }}>
+          <TVFocusablePoster
            onPress={() => handleItemPress(item)}
-            onLongPress={() => showItemActions(item)}
            onFocus={() => onItemFocus?.(item)}
-            width={posterSizes.poster}
-          />
+            hasTVPreferredFocus={false}
+          >
+            {item.Type === "Movie" && <MoviePoster item={item} />}
+            {item.Type === "Series" && <SeriesPoster item={item} />}
+          </TVFocusablePoster>
+          <TVItemCardText item={item} typography={typography} />
        </View>
      );
    },
-    [
-      ITEM_GAP,
-      posterSizes.poster,
-      handleItemPress,
-      showItemActions,
-      onItemFocus,
-    ],
+    [handleItemPress, onItemFocus, typography],
  );

  if (!isLoading && (!items || items.length === 0)) return null;
@@ -145,7 +165,7 @@ const WatchlistSection: React.FC<WatchlistSectionProps> = ({
          fontWeight: "700",
          color: "#FFFFFF",
          marginBottom: 20,
-          marginLeft: sizes.padding.horizontal,
+          marginLeft: SCALE_PADDING,
          letterSpacing: 0.5,
        }}
      >
@@ -162,11 +182,11 @@ const WatchlistSection: React.FC<WatchlistSectionProps> = ({
          }}
        >
          {[1, 2, 3, 4, 5].map((i) => (
-            <View key={i} style={{ width: posterSizes.poster }}>
+            <View key={i} style={{ width: TV_POSTER_WIDTH }}>
              <View
                style={{
                  backgroundColor: "#262626",
-                  width: posterSizes.poster,
+                  width: TV_POSTER_WIDTH,
                  aspectRatio: 10 / 15,
                  borderRadius: 12,
                  marginBottom: 8,
@@ -188,13 +208,9 @@ const WatchlistSection: React.FC<WatchlistSectionProps> = ({
          removeClippedSubviews={false}
          getItemLayout={getItemLayout}
          style={{ overflow: "visible" }}
-          contentInset={{
-            left: sizes.padding.horizontal,
-            right: sizes.padding.horizontal,
-          }}
-          contentOffset={{ x: -sizes.padding.horizontal, y: 0 }}
          contentContainerStyle={{
            paddingVertical: SCALE_PADDING,
+            paddingHorizontal: SCALE_PADDING,
          }}
        />
      )}
@@ -210,9 +226,6 @@ interface StreamystatsPromotedWatchlistsProps extends ViewProps {
 export const StreamystatsPromotedWatchlists: React.FC<
  StreamystatsPromotedWatchlistsProps
 > = ({ enabled = true, onItemFocus, ...props }) => {
-  const posterSizes = useScaledTVPosterSizes();
-  const sizes = useScaledTVSizes();
-  const ITEM_GAP = sizes.gaps.item;
  const api = useAtomValue(apiAtom);
  const user = useAtomValue(userAtom);
  const { settings } = useSettings();
@@ -303,11 +316,11 @@ export const StreamystatsPromotedWatchlists: React.FC<
          }}
        >
          {[1, 2, 3, 4, 5].map((i) => (
-            <View key={i} style={{ width: posterSizes.poster }}>
+            <View key={i} style={{ width: TV_POSTER_WIDTH }}>
              <View
                style={{
                  backgroundColor: "#262626",
-                  width: posterSizes.poster,
+                  width: TV_POSTER_WIDTH,
                  aspectRatio: 10 / 15,
                  borderRadius: 12,
                  marginBottom: 8,
--- a/components/home/StreamystatsRecommendations.tv.tsx
+++ b/components/home/StreamystatsRecommendations.tv.tsx
@@ -11,16 +11,23 @@ import { FlatList, View, type ViewProps } from "react-native";

 import { Text } from "@/components/common/Text";
 import { getItemNavigation } from "@/components/common/TouchableItemRouter";
-import { TVPosterCard } from "@/components/tv/TVPosterCard";
-import { useScaledTVSizes } from "@/constants/TVSizes";
+import MoviePoster, {
+  TV_POSTER_WIDTH,
+} from "@/components/posters/MoviePoster.tv";
+import SeriesPoster from "@/components/posters/SeriesPoster.tv";
+import { TVFocusablePoster } from "@/components/tv/TVFocusablePoster";
 import { useScaledTVTypography } from "@/constants/TVTypography";
 import useRouter from "@/hooks/useAppRouter";
-import { useTVItemActionModal } from "@/hooks/useTVItemActionModal";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { useSettings } from "@/utils/atoms/settings";
 import { createStreamystatsApi } from "@/utils/streamystats/api";
 import type { StreamystatsRecommendationsIdsResponse } from "@/utils/streamystats/types";

+const ITEM_GAP = 16;
+const SCALE_PADDING = 20;
+
+type Typography = ReturnType<typeof useScaledTVTypography>;
+
 interface Props extends ViewProps {
  title: string;
  type: "Movie" | "Series";
@@ -29,6 +36,31 @@ interface Props extends ViewProps {
  onItemFocus?: (item: BaseItemDto) => void;
 }

+const TVItemCardText: React.FC<{
+  item: BaseItemDto;
+  typography: Typography;
+}> = ({ item, typography }) => {
+  return (
+    <View style={{ marginTop: 12, flexDirection: "column" }}>
+      <Text
+        numberOfLines={1}
+        style={{ fontSize: typography.callout, color: "#FFFFFF" }}
+      >
+        {item.Name}
+      </Text>
+      <Text
+        style={{
+          fontSize: typography.callout,
+          color: "#9CA3AF",
+          marginTop: 2,
+        }}
+      >
+        {item.ProductionYear}
+      </Text>
+    </View>
+  );
+};
+
 export const StreamystatsRecommendations: React.FC<Props> = ({
  title,
  type,
@@ -38,12 +70,10 @@ export const StreamystatsRecommendations: React.FC<Props> = ({
  ...props
 }) => {
  const typography = useScaledTVTypography();
-  const sizes = useScaledTVSizes();
  const api = useAtomValue(apiAtom);
  const user = useAtomValue(userAtom);
  const { settings } = useSettings();
  const router = useRouter();
-  const { showItemActions } = useTVItemActionModal();
  const segments = useSegments();
  const from = (segments as string[])[2] || "(home)";

@@ -160,29 +190,30 @@ export const StreamystatsRecommendations: React.FC<Props> = ({

  const getItemLayout = useCallback(
    (_data: ArrayLike<BaseItemDto> | null | undefined, index: number) => ({
-      length: sizes.posters.poster + sizes.gaps.item,
-      offset: (sizes.posters.poster + sizes.gaps.item) * index,
+      length: TV_POSTER_WIDTH + ITEM_GAP,
+      offset: (TV_POSTER_WIDTH + ITEM_GAP) * index,
      index,
    }),
-    [sizes],
+    [],
  );

  const renderItem = useCallback(
    ({ item }: { item: BaseItemDto }) => {
      return (
-        <View style={{ marginRight: sizes.gaps.item }}>
-          <TVPosterCard
-            item={item}
-            orientation='vertical'
+        <View style={{ marginRight: ITEM_GAP, width: TV_POSTER_WIDTH }}>
+          <TVFocusablePoster
            onPress={() => handleItemPress(item)}
-            onLongPress={() => showItemActions(item)}
            onFocus={() => onItemFocus?.(item)}
-            width={sizes.posters.poster}
-          />
+            hasTVPreferredFocus={false}
+          >
+            {item.Type === "Movie" && <MoviePoster item={item} />}
+            {item.Type === "Series" && <SeriesPoster item={item} />}
+          </TVFocusablePoster>
+          <TVItemCardText item={item} typography={typography} />
        </View>
      );
    },
-    [sizes, handleItemPress, showItemActions, onItemFocus],
+    [handleItemPress, onItemFocus, typography],
  );

  if (!streamyStatsEnabled) return null;
@@ -197,7 +228,7 @@ export const StreamystatsRecommendations: React.FC<Props> = ({
          fontWeight: "700",
          color: "#FFFFFF",
          marginBottom: 20,
-          marginLeft: sizes.padding.horizontal,
+          marginLeft: SCALE_PADDING,
          letterSpacing: 0.5,
        }}
      >
@@ -208,17 +239,17 @@ export const StreamystatsRecommendations: React.FC<Props> = ({
        <View
          style={{
            flexDirection: "row",
-            gap: sizes.gaps.item,
-            paddingHorizontal: sizes.padding.scale,
-            paddingVertical: sizes.padding.scale,
+            gap: ITEM_GAP,
+            paddingHorizontal: SCALE_PADDING,
+            paddingVertical: SCALE_PADDING,
          }}
        >
          {[1, 2, 3, 4, 5].map((i) => (
-            <View key={i} style={{ width: sizes.posters.poster }}>
+            <View key={i} style={{ width: TV_POSTER_WIDTH }}>
              <View
                style={{
                  backgroundColor: "#262626",
-                  width: sizes.posters.poster,
+                  width: TV_POSTER_WIDTH,
                  aspectRatio: 10 / 15,
                  borderRadius: 12,
                  marginBottom: 8,
@@ -240,13 +271,9 @@ export const StreamystatsRecommendations: React.FC<Props> = ({
          removeClippedSubviews={false}
          getItemLayout={getItemLayout}
          style={{ overflow: "visible" }}
-          contentInset={{
-            left: sizes.padding.horizontal,
-            right: sizes.padding.horizontal,
-          }}
-          contentOffset={{ x: -sizes.padding.horizontal, y: 0 }}
          contentContainerStyle={{
-            paddingVertical: sizes.padding.scale,
+            paddingVertical: SCALE_PADDING,
+            paddingHorizontal: SCALE_PADDING,
          }}
        />
      )}
--- a/components/home/TVHeroCarousel.tsx
+++ b/components/home/TVHeroCarousel.tsx
@@ -23,7 +23,6 @@ import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { ProgressBar } from "@/components/common/ProgressBar";
 import { Text } from "@/components/common/Text";
 import { getItemNavigation } from "@/components/common/TouchableItemRouter";
-import { type ScaledTVSizes, useScaledTVSizes } from "@/constants/TVSizes";
 import { useScaledTVTypography } from "@/constants/TVTypography";
 import useRouter from "@/hooks/useAppRouter";
 import {
@@ -36,24 +35,25 @@ import { getLogoImageUrlById } from "@/utils/jellyfin/image/getLogoImageUrlById"
 import { runtimeTicksToMinutes } from "@/utils/time";

 const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get("window");
+const HERO_HEIGHT = SCREEN_HEIGHT * 0.62;
+const CARD_WIDTH = 280;
+const CARD_GAP = 24;
+const CARD_PADDING = 60;

 interface TVHeroCarouselProps {
  items: BaseItemDto[];
  onItemFocus?: (item: BaseItemDto) => void;
-  onItemLongPress?: (item: BaseItemDto) => void;
 }

 interface HeroCardProps {
  item: BaseItemDto;
  isFirst: boolean;
-  sizes: ScaledTVSizes;
  onFocus: (item: BaseItemDto) => void;
  onPress: (item: BaseItemDto) => void;
-  onLongPress?: (item: BaseItemDto) => void;
 }

 const HeroCard: React.FC<HeroCardProps> = React.memo(
-  ({ item, isFirst, sizes, onFocus, onPress, onLongPress }) => {
+  ({ item, isFirst, onFocus, onPress }) => {
    const api = useAtomValue(apiAtom);
    const [focused, setFocused] = useState(false);
    const scale = useRef(new Animated.Value(1)).current;
@@ -84,6 +84,8 @@ const HeroCard: React.FC<HeroCardProps> = React.memo(
      return null;
    }, [api, item]);

+    const progress = item.UserData?.PlayedPercentage || 0;
+
    const animateTo = useCallback(
      (value: number) =>
        Animated.timing(scale, {
@@ -97,9 +99,9 @@ const HeroCard: React.FC<HeroCardProps> = React.memo(

    const handleFocus = useCallback(() => {
      setFocused(true);
-      animateTo(sizes.animation.focusScale);
+      animateTo(1.1);
      onFocus(item);
-    }, [animateTo, onFocus, item, sizes.animation.focusScale]);
+    }, [animateTo, onFocus, item]);

    const handleBlur = useCallback(() => {
      setFocused(false);
@@ -110,31 +112,25 @@ const HeroCard: React.FC<HeroCardProps> = React.memo(
      onPress(item);
    }, [onPress, item]);

-    const handleLongPress = useCallback(() => {
-      onLongPress?.(item);
-    }, [onLongPress, item]);
-
    // Use glass poster for tvOS 26+
-    if (useGlass && posterUrl) {
-      const progress = item.UserData?.PlayedPercentage || 0;
+    if (useGlass) {
      return (
        <Pressable
          onPress={handlePress}
-          onLongPress={handleLongPress}
          onFocus={handleFocus}
          onBlur={handleBlur}
          hasTVPreferredFocus={isFirst}
-          style={{ marginRight: sizes.gaps.item }}
+          style={{ marginRight: CARD_GAP }}
        >
          <GlassPosterView
            imageUrl={posterUrl}
            aspectRatio={16 / 9}
-            cornerRadius={24}
+            cornerRadius={16}
            progress={progress}
            showWatchedIndicator={false}
            isFocused={focused}
-            width={sizes.posters.episode}
-            style={{ width: sizes.posters.episode }}
+            width={CARD_WIDTH}
+            style={{ width: CARD_WIDTH }}
          />
        </Pressable>
      );
@@ -144,21 +140,18 @@ const HeroCard: React.FC<HeroCardProps> = React.memo(
    return (
      <Pressable
        onPress={handlePress}
-        onLongPress={handleLongPress}
        onFocus={handleFocus}
        onBlur={handleBlur}
        hasTVPreferredFocus={isFirst}
-        style={{ marginRight: sizes.gaps.item }}
+        style={{ marginRight: CARD_GAP }}
      >
        <Animated.View
          style={{
-            width: sizes.posters.episode,
+            width: CARD_WIDTH,
            aspectRatio: 16 / 9,
-            borderRadius: 24,
+            borderRadius: 16,
            overflow: "hidden",
            transform: [{ scale }],
-            borderWidth: 2,
-            borderColor: focused ? "#FFFFFF" : "transparent",
            shadowColor: "#FFFFFF",
            shadowOffset: { width: 0, height: 0 },
            shadowOpacity: focused ? 0.6 : 0,
@@ -201,12 +194,10 @@ const BACKDROP_DEBOUNCE_MS = 300;
 export const TVHeroCarousel: React.FC<TVHeroCarouselProps> = ({
  items,
  onItemFocus,
-  onItemLongPress,
 }) => {
  const typography = useScaledTVTypography();
-  const sizes = useScaledTVSizes();
  const api = useAtomValue(apiAtom);
-  const _insets = useSafeAreaInsets();
+  const insets = useSafeAreaInsets();
  const router = useRouter();

  // Active item for featured display (debounced)
@@ -363,13 +354,11 @@ export const TVHeroCarousel: React.FC<TVHeroCarouselProps> = ({
      <HeroCard
        item={item}
        isFirst={index === 0}
-        sizes={sizes}
        onFocus={handleCardFocus}
        onPress={handleCardPress}
-        onLongPress={onItemLongPress}
      />
    ),
-    [handleCardFocus, handleCardPress, onItemLongPress, sizes],
+    [handleCardFocus, handleCardPress],
  );

  // Memoize keyExtractor
@@ -377,10 +366,8 @@ export const TVHeroCarousel: React.FC<TVHeroCarouselProps> = ({

  if (items.length === 0) return null;

-  const heroHeight = SCREEN_HEIGHT * sizes.padding.heroHeight;
-
  return (
-    <View style={{ height: heroHeight, width: "100%" }}>
+    <View style={{ height: HERO_HEIGHT, width: "100%" }}>
      {/* Backdrop layers with crossfade */}
      <View
        style={{
@@ -465,14 +452,13 @@ export const TVHeroCarousel: React.FC<TVHeroCarouselProps> = ({
        />
      </View>

-      {/* Content overlay - text elements with padding */}
+      {/* Content overlay */}
      <View
        style={{
          position: "absolute",
-          left: sizes.padding.horizontal,
-          right: sizes.padding.horizontal,
-          bottom:
-            40 + sizes.posters.episode * (9 / 16) + sizes.gaps.small * 2 + 20,
+          left: insets.left + CARD_PADDING,
+          right: insets.right + CARD_PADDING,
+          bottom: 40,
        }}
      >
        {/* Logo or Title */}
@@ -537,6 +523,7 @@ export const TVHeroCarousel: React.FC<TVHeroCarouselProps> = ({
            flexDirection: "row",
            alignItems: "center",
            gap: 16,
+            marginBottom: 20,
          }}
        >
          {year && (
@@ -616,29 +603,15 @@ export const TVHeroCarousel: React.FC<TVHeroCarouselProps> = ({
            </View>
          )}
        </View>
-      </View>

-      {/* Thumbnail carousel - edge-to-edge */}
-      <View
-        style={{
-          position: "absolute",
-          left: 0,
-          right: 0,
-          bottom: 40,
-        }}
-      >
+        {/* Thumbnail carousel */}
        <FlatList
          horizontal
          data={heroItems}
          keyExtractor={keyExtractor}
          showsHorizontalScrollIndicator={false}
          style={{ overflow: "visible" }}
-          contentInset={{
-            left: sizes.padding.horizontal,
-            right: sizes.padding.horizontal,
-          }}
-          contentOffset={{ x: -sizes.padding.horizontal, y: 0 }}
-          contentContainerStyle={{ paddingVertical: sizes.gaps.small }}
+          contentContainerStyle={{ paddingVertical: 12 }}
          renderItem={renderHeroCard}
          removeClippedSubviews={false}
          initialNumToRender={8}
--- a/components/library/TVLibraries.tsx
+++ b/components/library/TVLibraries.tsx
@@ -103,8 +103,6 @@ const TVLibraryRow: React.FC<{
      return t("library.item_types.series");
    if (library.CollectionType === "boxsets")
      return t("library.item_types.boxsets");
-    if (library.CollectionType === "playlists")
-      return t("library.item_types.playlists");
    if (library.CollectionType === "music")
      return t("library.item_types.items");
    return t("library.item_types.items");
@@ -260,7 +258,8 @@ export const TVLibraries: React.FC = () => {
      userViews
        ?.filter((l) => !settings?.hiddenLibraries?.includes(l.Id!))
        .filter((l) => l.CollectionType !== "books")
-        .filter((l) => l.CollectionType !== "music") || [],
+        .filter((l) => l.CollectionType !== "music")
+        .filter((l) => l.CollectionType !== "playlists") || [],
    [userViews, settings?.hiddenLibraries],
  );

@@ -274,10 +273,6 @@ export const TVLibraries: React.FC = () => {
          if (library.CollectionType === "movies") itemType = "Movie";
          else if (library.CollectionType === "tvshows") itemType = "Series";
          else if (library.CollectionType === "boxsets") itemType = "BoxSet";
-          else if (library.CollectionType === "playlists")
-            itemType = "Playlist";
-
-          const isPlaylistsLib = library.CollectionType === "playlists";

          // Fetch count
          const countResponse = await getItemsApi(api!).getItems({
@@ -286,7 +281,6 @@ export const TVLibraries: React.FC = () => {
            recursive: true,
            limit: 0,
            includeItemTypes: itemType ? [itemType as any] : undefined,
-            ...(isPlaylistsLib ? { mediaTypes: ["Video"] } : {}),
          });

          // Fetch preview items with backdrops
@@ -298,7 +292,6 @@ export const TVLibraries: React.FC = () => {
            sortBy: ["Random"],
            includeItemTypes: itemType ? [itemType as any] : undefined,
            imageTypes: ["Backdrop"],
-            ...(isPlaylistsLib ? { mediaTypes: ["Video"] } : {}),
          });

          return {
@@ -316,10 +309,6 @@ export const TVLibraries: React.FC = () => {

  const handleLibraryPress = useCallback(
    (library: BaseItemDto) => {
-      if (library.CollectionType === "livetv") {
-        router.push("/(auth)/(tabs)/(libraries)/livetv/programs");
-        return;
-      }
      if (library.CollectionType === "music") {
        router.push({
          pathname: `/(auth)/(tabs)/(libraries)/music/[libraryId]/suggestions`,
--- a/components/livetv/TVChannelCard.tsx
+++ b/components/livetv/TVChannelCard.tsx
@@ -1,183 +0,0 @@
-import type { Api } from "@jellyfin/sdk";
-import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
-import React from "react";
-import { Animated, Image, Pressable, StyleSheet, View } from "react-native";
-import { Text } from "@/components/common/Text";
-import { useTVFocusAnimation } from "@/components/tv/hooks/useTVFocusAnimation";
-import { useScaledTVTypography } from "@/constants/TVTypography";
-import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
-
-interface TVChannelCardProps {
-  channel: BaseItemDto;
-  api: Api | null;
-  onPress: () => void;
-  hasTVPreferredFocus?: boolean;
-  disabled?: boolean;
-}
-
-const CARD_WIDTH = 200;
-const CARD_HEIGHT = 160;
-
-export const TVChannelCard: React.FC<TVChannelCardProps> = ({
-  channel,
-  api,
-  onPress,
-  hasTVPreferredFocus = false,
-  disabled = false,
-}) => {
-  const typography = useScaledTVTypography();
-  const { focused, handleFocus, handleBlur, animatedStyle } =
-    useTVFocusAnimation({
-      scaleAmount: 1.05,
-      duration: 120,
-    });
-
-  const imageUrl = getPrimaryImageUrl({
-    api,
-    item: channel,
-    quality: 80,
-    width: 200,
-  });
-
-  return (
-    <Pressable
-      onPress={onPress}
-      onFocus={handleFocus}
-      onBlur={handleBlur}
-      hasTVPreferredFocus={hasTVPreferredFocus}
-      disabled={disabled}
-      focusable={!disabled}
-      style={styles.pressable}
-    >
-      <Animated.View
-        style={[
-          styles.container,
-          {
-            backgroundColor: focused ? "#FFFFFF" : "rgba(255, 255, 255, 0.08)",
-            borderColor: focused ? "#FFFFFF" : "rgba(255, 255, 255, 0.1)",
-          },
-          animatedStyle,
-          focused && styles.focusedShadow,
-        ]}
-      >
-        {/* Channel logo or number */}
-        <View style={styles.logoContainer}>
-          {imageUrl ? (
-            <Image
-              source={{ uri: imageUrl }}
-              style={styles.logo}
-              resizeMode='contain'
-            />
-          ) : (
-            <View
-              style={[
-                styles.numberFallback,
-                {
-                  backgroundColor: focused
-                    ? "#E5E5E5"
-                    : "rgba(255, 255, 255, 0.15)",
-                },
-              ]}
-            >
-              <Text
-                style={[
-                  styles.numberText,
-                  {
-                    fontSize: typography.title,
-                    color: focused ? "#000000" : "#FFFFFF",
-                  },
-                ]}
-              >
-                {channel.ChannelNumber || "?"}
-              </Text>
-            </View>
-          )}
-        </View>
-
-        {/* Channel name */}
-        <Text
-          numberOfLines={2}
-          style={[
-            styles.channelName,
-            {
-              fontSize: typography.callout,
-              color: focused ? "#000000" : "#FFFFFF",
-            },
-          ]}
-        >
-          {channel.Name}
-        </Text>
-
-        {/* Channel number (if name is shown) */}
-        {channel.ChannelNumber && (
-          <Text
-            numberOfLines={1}
-            style={[
-              styles.channelNumber,
-              {
-                fontSize: typography.callout,
-                color: focused
-                  ? "rgba(0, 0, 0, 0.6)"
-                  : "rgba(255, 255, 255, 0.5)",
-              },
-            ]}
-          >
-            Ch. {channel.ChannelNumber}
-          </Text>
-        )}
-      </Animated.View>
-    </Pressable>
-  );
-};
-
-const styles = StyleSheet.create({
-  pressable: {
-    width: CARD_WIDTH,
-    height: CARD_HEIGHT,
-  },
-  container: {
-    flex: 1,
-    borderRadius: 12,
-    borderWidth: 1,
-    padding: 12,
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  focusedShadow: {
-    shadowColor: "#FFFFFF",
-    shadowOffset: { width: 0, height: 0 },
-    shadowOpacity: 0.4,
-    shadowRadius: 12,
-  },
-  logoContainer: {
-    width: 80,
-    height: 60,
-    marginBottom: 8,
-    justifyContent: "center",
-    alignItems: "center",
-  },
-  logo: {
-    width: "100%",
-    height: "100%",
-  },
-  numberFallback: {
-    width: 60,
-    height: 60,
-    borderRadius: 30,
-    justifyContent: "center",
-    alignItems: "center",
-  },
-  numberText: {
-    fontWeight: "bold",
-  },
-  channelName: {
-    fontWeight: "600",
-    textAlign: "center",
-    marginBottom: 4,
-  },
-  channelNumber: {
-    fontWeight: "400",
-  },
-});
-
-export { CARD_WIDTH, CARD_HEIGHT };
--- a/components/livetv/TVChannelsGrid.tsx
+++ b/components/livetv/TVChannelsGrid.tsx
@@ -1,136 +0,0 @@
-import { getLiveTvApi } from "@jellyfin/sdk/lib/utils/api";
-import { useQuery } from "@tanstack/react-query";
-import { useAtomValue } from "jotai";
-import React, { useCallback } from "react";
-import { useTranslation } from "react-i18next";
-import { ActivityIndicator, ScrollView, StyleSheet, View } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { Text } from "@/components/common/Text";
-import { useScaledTVTypography } from "@/constants/TVTypography";
-import useRouter from "@/hooks/useAppRouter";
-import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-import { TVChannelCard } from "./TVChannelCard";
-
-const HORIZONTAL_PADDING = 60;
-const GRID_GAP = 16;
-
-export const TVChannelsGrid: React.FC = () => {
-  const { t } = useTranslation();
-  const typography = useScaledTVTypography();
-  const insets = useSafeAreaInsets();
-  const router = useRouter();
-  const api = useAtomValue(apiAtom);
-  const user = useAtomValue(userAtom);
-
-  // Fetch all channels
-  const { data: channelsData, isLoading } = useQuery({
-    queryKey: ["livetv", "channels-grid", "all"],
-    queryFn: async () => {
-      if (!api || !user?.Id) return null;
-      const res = await getLiveTvApi(api).getLiveTvChannels({
-        enableFavoriteSorting: true,
-        userId: user.Id,
-        addCurrentProgram: false,
-        enableUserData: false,
-        enableImageTypes: ["Primary"],
-      });
-      return res.data;
-    },
-    enabled: !!api && !!user?.Id,
-    staleTime: 5 * 60 * 1000, // 5 minutes
-  });
-
-  const channels = channelsData?.Items ?? [];
-
-  const handleChannelPress = useCallback(
-    (channelId: string | undefined) => {
-      if (channelId) {
-        // Navigate directly to the player to start the channel
-        const queryParams = new URLSearchParams({
-          itemId: channelId,
-          audioIndex: "",
-          subtitleIndex: "",
-          mediaSourceId: "",
-          bitrateValue: "",
-        });
-        router.push(`/player/direct-player?${queryParams.toString()}`);
-      }
-    },
-    [router],
-  );
-
-  if (isLoading) {
-    return (
-      <View style={styles.loadingContainer}>
-        <ActivityIndicator size='large' color='#FFFFFF' />
-      </View>
-    );
-  }
-
-  if (channels.length === 0) {
-    return (
-      <View style={styles.emptyContainer}>
-        <Text style={[styles.emptyText, { fontSize: typography.body }]}>
-          {t("live_tv.no_channels")}
-        </Text>
-      </View>
-    );
-  }
-
-  return (
-    <ScrollView
-      style={styles.container}
-      contentContainerStyle={[
-        styles.contentContainer,
-        {
-          paddingLeft: insets.left + HORIZONTAL_PADDING,
-          paddingRight: insets.right + HORIZONTAL_PADDING,
-          paddingBottom: insets.bottom + 60,
-        },
-      ]}
-      showsVerticalScrollIndicator={false}
-    >
-      <View style={styles.grid}>
-        {channels.map((channel, index) => (
-          <TVChannelCard
-            key={channel.Id ?? index}
-            channel={channel}
-            api={api}
-            onPress={() => handleChannelPress(channel.Id)}
-            // No hasTVPreferredFocus - tab buttons handle initial focus
-          />
-        ))}
-      </View>
-    </ScrollView>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  contentContainer: {
-    paddingTop: 24,
-  },
-  grid: {
-    flexDirection: "row",
-    flexWrap: "wrap",
-    justifyContent: "flex-start",
-    gap: GRID_GAP,
-    overflow: "visible",
-    paddingVertical: 10, // Extra padding for focus scale animation
-  },
-  loadingContainer: {
-    flex: 1,
-    justifyContent: "center",
-    alignItems: "center",
-  },
-  emptyContainer: {
-    flex: 1,
-    justifyContent: "center",
-    alignItems: "center",
-  },
-  emptyText: {
-    color: "rgba(255, 255, 255, 0.6)",
-  },
-});
--- a/components/livetv/TVGuideChannelRow.tsx
+++ b/components/livetv/TVGuideChannelRow.tsx
@@ -1,146 +0,0 @@
-import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
-import React, { useMemo } from "react";
-import { StyleSheet, View } from "react-native";
-import { TVGuideProgramCell } from "./TVGuideProgramCell";
-
-interface TVGuideChannelRowProps {
-  programs: BaseItemDto[];
-  baseTime: Date;
-  pixelsPerHour: number;
-  minProgramWidth: number;
-  hoursToShow: number;
-  onProgramPress: (program: BaseItemDto) => void;
-  disabled?: boolean;
-  firstProgramRefSetter?: (ref: View | null) => void;
-}
-
-export const TVGuideChannelRow: React.FC<TVGuideChannelRowProps> = ({
-  programs,
-  baseTime,
-  pixelsPerHour,
-  minProgramWidth,
-  hoursToShow,
-  onProgramPress,
-  disabled = false,
-  firstProgramRefSetter,
-}) => {
-  const isCurrentlyAiring = (program: BaseItemDto): boolean => {
-    if (!program.StartDate || !program.EndDate) return false;
-    const now = new Date();
-    const start = new Date(program.StartDate);
-    const end = new Date(program.EndDate);
-    return now >= start && now <= end;
-  };
-
-  const getTimeOffset = (startDate: string): number => {
-    const start = new Date(startDate);
-    const diffMinutes = (start.getTime() - baseTime.getTime()) / 60000;
-    return Math.max(0, (diffMinutes / 60) * pixelsPerHour);
-  };
-
-  // Filter programs for this channel and within the time window
-  const filteredPrograms = useMemo(() => {
-    const endTime = new Date(baseTime.getTime() + hoursToShow * 60 * 60 * 1000);
-
-    return programs
-      .filter((p) => {
-        if (!p.StartDate || !p.EndDate) return false;
-        const start = new Date(p.StartDate);
-        const end = new Date(p.EndDate);
-        // Program overlaps with our time window
-        return end > baseTime && start < endTime;
-      })
-      .sort((a, b) => {
-        const dateA = new Date(a.StartDate || 0);
-        const dateB = new Date(b.StartDate || 0);
-        return dateA.getTime() - dateB.getTime();
-      });
-  }, [programs, baseTime, hoursToShow]);
-
-  // Calculate program cells with positions (absolute positioning)
-  const programCells = useMemo(() => {
-    return filteredPrograms.map((program) => {
-      if (!program.StartDate || !program.EndDate) {
-        return { program, width: minProgramWidth, left: 0 };
-      }
-
-      // Clamp the start time to baseTime if program started earlier
-      const programStart = new Date(program.StartDate);
-      const effectiveStart = programStart < baseTime ? baseTime : programStart;
-
-      // Clamp the end time to the window end
-      const windowEnd = new Date(
-        baseTime.getTime() + hoursToShow * 60 * 60 * 1000,
-      );
-      const programEnd = new Date(program.EndDate);
-      const effectiveEnd = programEnd > windowEnd ? windowEnd : programEnd;
-
-      const durationMinutes =
-        (effectiveEnd.getTime() - effectiveStart.getTime()) / 60000;
-      const width = Math.max(
-        (durationMinutes / 60) * pixelsPerHour - 4,
-        minProgramWidth,
-      ); // -4 for gap
-
-      const left = getTimeOffset(effectiveStart.toISOString());
-
-      return {
-        program,
-        width,
-        left,
-      };
-    });
-  }, [filteredPrograms, baseTime, pixelsPerHour, minProgramWidth, hoursToShow]);
-
-  const totalWidth = hoursToShow * pixelsPerHour;
-
-  return (
-    <View style={[styles.container, { width: totalWidth }]}>
-      {programCells.map(({ program, width, left }, index) => (
-        <View
-          key={program.Id || index}
-          style={[styles.programCellWrapper, { left, width }]}
-        >
-          <TVGuideProgramCell
-            program={program}
-            width={width}
-            isCurrentlyAiring={isCurrentlyAiring(program)}
-            onPress={() => onProgramPress(program)}
-            disabled={disabled}
-            refSetter={index === 0 ? firstProgramRefSetter : undefined}
-          />
-        </View>
-      ))}
-
-      {/* Empty state */}
-      {programCells.length === 0 && (
-        <View style={[styles.noPrograms, { width: totalWidth - 8 }]}>
-          {/* Empty row indicator */}
-        </View>
-      )}
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    height: 80,
-    position: "relative",
-    borderBottomWidth: 1,
-    borderBottomColor: "rgba(255, 255, 255, 0.2)",
-    backgroundColor: "rgba(20, 20, 20, 1)",
-  },
-  programCellWrapper: {
-    position: "absolute",
-    top: 4,
-    bottom: 4,
-  },
-  noPrograms: {
-    position: "absolute",
-    left: 4,
-    top: 4,
-    bottom: 4,
-    backgroundColor: "rgba(255, 255, 255, 0.05)",
-    borderRadius: 8,
-  },
-});
--- a/components/livetv/TVGuidePageNavigation.tsx
+++ b/components/livetv/TVGuidePageNavigation.tsx
@@ -1,154 +0,0 @@
-import { Ionicons } from "@expo/vector-icons";
-import React from "react";
-import { useTranslation } from "react-i18next";
-import { Animated, Pressable, StyleSheet, View } from "react-native";
-import { Text } from "@/components/common/Text";
-import { useTVFocusAnimation } from "@/components/tv/hooks/useTVFocusAnimation";
-import { useScaledTVTypography } from "@/constants/TVTypography";
-
-interface TVGuidePageNavigationProps {
-  currentPage: number;
-  totalPages: number;
-  onPrevious: () => void;
-  onNext: () => void;
-  disabled?: boolean;
-  prevButtonRefSetter?: (ref: View | null) => void;
-}
-
-interface NavButtonProps {
-  onPress: () => void;
-  icon: keyof typeof Ionicons.glyphMap;
-  label: string;
-  isDisabled: boolean;
-  disabled?: boolean;
-  refSetter?: (ref: View | null) => void;
-}
-
-const NavButton: React.FC<NavButtonProps> = ({
-  onPress,
-  icon,
-  label,
-  isDisabled,
-  disabled = false,
-  refSetter,
-}) => {
-  const typography = useScaledTVTypography();
-  const { focused, handleFocus, handleBlur, animatedStyle } =
-    useTVFocusAnimation({
-      scaleAmount: 1.05,
-      duration: 120,
-    });
-
-  const visuallyDisabled = isDisabled || disabled;
-
-  const handlePress = () => {
-    if (!visuallyDisabled) {
-      onPress();
-    }
-  };
-
-  return (
-    <Pressable
-      ref={refSetter}
-      onPress={handlePress}
-      onFocus={handleFocus}
-      onBlur={handleBlur}
-      focusable={!disabled}
-    >
-      <Animated.View
-        style={[
-          styles.navButton,
-          animatedStyle,
-          {
-            backgroundColor: focused ? "#FFFFFF" : "rgba(255, 255, 255, 0.1)",
-            opacity: visuallyDisabled ? 0.3 : 1,
-          },
-        ]}
-      >
-        <Ionicons
-          name={icon}
-          size={20}
-          color={focused ? "#000000" : "#FFFFFF"}
-        />
-        <Text
-          style={[
-            styles.navButtonText,
-            {
-              fontSize: typography.callout,
-              color: focused ? "#000000" : "#FFFFFF",
-            },
-          ]}
-        >
-          {label}
-        </Text>
-      </Animated.View>
-    </Pressable>
-  );
-};
-
-export const TVGuidePageNavigation: React.FC<TVGuidePageNavigationProps> = ({
-  currentPage,
-  totalPages,
-  onPrevious,
-  onNext,
-  disabled = false,
-  prevButtonRefSetter,
-}) => {
-  const { t } = useTranslation();
-  const typography = useScaledTVTypography();
-
-  return (
-    <View style={styles.container}>
-      <View style={styles.buttonsContainer}>
-        <NavButton
-          onPress={onPrevious}
-          icon='chevron-back'
-          label={t("live_tv.previous")}
-          isDisabled={currentPage <= 1}
-          disabled={disabled}
-          refSetter={prevButtonRefSetter}
-        />
-
-        <NavButton
-          onPress={onNext}
-          icon='chevron-forward'
-          label={t("live_tv.next")}
-          isDisabled={currentPage >= totalPages}
-          disabled={disabled}
-        />
-      </View>
-
-      <Text style={[styles.pageText, { fontSize: typography.callout }]}>
-        {t("live_tv.page_of", { current: currentPage, total: totalPages })}
-      </Text>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    paddingVertical: 16,
-  },
-  buttonsContainer: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 12,
-  },
-  navButton: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8,
-    paddingHorizontal: 20,
-    paddingVertical: 12,
-    borderRadius: 8,
-  },
-  navButtonText: {
-    fontWeight: "600",
-  },
-  pageText: {
-    color: "rgba(255, 255, 255, 0.6)",
-  },
-});
--- a/components/livetv/TVGuideProgramCell.tsx
+++ b/components/livetv/TVGuideProgramCell.tsx
@@ -1,148 +0,0 @@
-import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
-import React from "react";
-import { Animated, Pressable, StyleSheet, View } from "react-native";
-import { Text } from "@/components/common/Text";
-import { useTVFocusAnimation } from "@/components/tv/hooks/useTVFocusAnimation";
-import { useScaledTVTypography } from "@/constants/TVTypography";
-
-interface TVGuideProgramCellProps {
-  program: BaseItemDto;
-  width: number;
-  isCurrentlyAiring: boolean;
-  onPress: () => void;
-  disabled?: boolean;
-  refSetter?: (ref: View | null) => void;
-}
-
-export const TVGuideProgramCell: React.FC<TVGuideProgramCellProps> = ({
-  program,
-  width,
-  isCurrentlyAiring,
-  onPress,
-  disabled = false,
-  refSetter,
-}) => {
-  const typography = useScaledTVTypography();
-  const { focused, handleFocus, handleBlur } = useTVFocusAnimation({
-    scaleAmount: 1,
-    duration: 120,
-  });
-
-  const formatTime = (date: string | null | undefined) => {
-    if (!date) return "";
-    const d = new Date(date);
-    return d.toLocaleTimeString([], {
-      hour: "2-digit",
-      minute: "2-digit",
-      hour12: false,
-    });
-  };
-
-  return (
-    <Pressable
-      ref={refSetter}
-      onPress={onPress}
-      onFocus={handleFocus}
-      onBlur={handleBlur}
-      disabled={disabled}
-      focusable={!disabled}
-      style={{ width }}
-    >
-      <Animated.View
-        style={[
-          styles.container,
-          {
-            backgroundColor: focused
-              ? "#FFFFFF"
-              : isCurrentlyAiring
-                ? "rgba(255, 255, 255, 0.15)"
-                : "rgba(255, 255, 255, 0.08)",
-            borderColor: focused ? "#FFFFFF" : "rgba(255, 255, 255, 0.1)",
-          },
-          focused && styles.focusedShadow,
-        ]}
-      >
-        {/* LIVE badge */}
-        {isCurrentlyAiring && (
-          <View style={styles.liveBadge}>
-            <Text
-              style={[styles.liveBadgeText, { fontSize: typography.callout }]}
-            >
-              LIVE
-            </Text>
-          </View>
-        )}
-
-        {/* Program name */}
-        <Text
-          numberOfLines={2}
-          style={[
-            styles.programName,
-            {
-              fontSize: typography.callout,
-              color: focused ? "#000000" : "#FFFFFF",
-            },
-          ]}
-        >
-          {program.Name}
-        </Text>
-
-        {/* Time range */}
-        <Text
-          numberOfLines={1}
-          style={[
-            styles.timeText,
-            {
-              fontSize: typography.callout,
-              color: focused
-                ? "rgba(0, 0, 0, 0.6)"
-                : "rgba(255, 255, 255, 0.5)",
-            },
-          ]}
-        >
-          {formatTime(program.StartDate)} - {formatTime(program.EndDate)}
-        </Text>
-      </Animated.View>
-    </Pressable>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    height: 70,
-    borderRadius: 8,
-    borderWidth: 1,
-    paddingHorizontal: 12,
-    paddingVertical: 8,
-    justifyContent: "center",
-    overflow: "hidden",
-  },
-  focusedShadow: {
-    shadowColor: "#FFFFFF",
-    shadowOffset: { width: 0, height: 0 },
-    shadowOpacity: 0.4,
-    shadowRadius: 12,
-  },
-  liveBadge: {
-    position: "absolute",
-    top: 6,
-    right: 6,
-    backgroundColor: "#EF4444",
-    paddingHorizontal: 6,
-    paddingVertical: 2,
-    borderRadius: 4,
-    zIndex: 10,
-    elevation: 10,
-  },
-  liveBadgeText: {
-    color: "#FFFFFF",
-    fontWeight: "bold",
-  },
-  programName: {
-    fontWeight: "600",
-    marginBottom: 4,
-  },
-  timeText: {
-    fontWeight: "400",
-  },
-});
--- a/components/livetv/TVGuideTimeHeader.tsx
+++ b/components/livetv/TVGuideTimeHeader.tsx
@@ -1,64 +0,0 @@
-import { BlurView } from "expo-blur";
-import React from "react";
-import { StyleSheet, View } from "react-native";
-import { Text } from "@/components/common/Text";
-import { useScaledTVTypography } from "@/constants/TVTypography";
-
-interface TVGuideTimeHeaderProps {
-  baseTime: Date;
-  hoursToShow: number;
-  pixelsPerHour: number;
-}
-
-export const TVGuideTimeHeader: React.FC<TVGuideTimeHeaderProps> = ({
-  baseTime,
-  hoursToShow,
-  pixelsPerHour,
-}) => {
-  const typography = useScaledTVTypography();
-
-  const hours: Date[] = [];
-  for (let i = 0; i < hoursToShow; i++) {
-    const hour = new Date(baseTime);
-    hour.setMinutes(0, 0, 0);
-    hour.setHours(baseTime.getHours() + i);
-    hours.push(hour);
-  }
-
-  const formatHour = (date: Date) => {
-    return date.toLocaleTimeString([], {
-      hour: "2-digit",
-      minute: "2-digit",
-      hour12: false,
-    });
-  };
-
-  return (
-    <BlurView intensity={40} tint='dark' style={styles.container}>
-      {hours.map((hour, index) => (
-        <View key={index} style={[styles.hourCell, { width: pixelsPerHour }]}>
-          <Text style={[styles.hourText, { fontSize: typography.callout }]}>
-            {formatHour(hour)}
-          </Text>
-        </View>
-      ))}
-    </BlurView>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: "row",
-    height: 44,
-  },
-  hourCell: {
-    justifyContent: "center",
-    paddingLeft: 12,
-    borderLeftWidth: 1,
-    borderLeftColor: "rgba(255, 255, 255, 0.1)",
-  },
-  hourText: {
-    color: "rgba(255, 255, 255, 0.6)",
-    fontWeight: "500",
-  },
-});
--- a/components/livetv/TVLiveTVGuide.tsx
+++ b/components/livetv/TVLiveTVGuide.tsx
@@ -1,433 +0,0 @@
-import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
-import { getLiveTvApi } from "@jellyfin/sdk/lib/utils/api";
-import { useQuery } from "@tanstack/react-query";
-import { useAtomValue } from "jotai";
-import React, {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-import { useTranslation } from "react-i18next";
-import {
-  ActivityIndicator,
-  NativeScrollEvent,
-  NativeSyntheticEvent,
-  ScrollView,
-  StyleSheet,
-  TVFocusGuideView,
-  View,
-} from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { Text } from "@/components/common/Text";
-import { useScaledTVTypography } from "@/constants/TVTypography";
-import useRouter from "@/hooks/useAppRouter";
-import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-import { TVGuideChannelRow } from "./TVGuideChannelRow";
-import { TVGuidePageNavigation } from "./TVGuidePageNavigation";
-import { TVGuideTimeHeader } from "./TVGuideTimeHeader";
-
-// Design constants
-const CHANNEL_COLUMN_WIDTH = 240;
-const PIXELS_PER_HOUR = 250;
-const ROW_HEIGHT = 80;
-const TIME_HEADER_HEIGHT = 44;
-const CHANNELS_PER_PAGE = 20;
-const MIN_PROGRAM_WIDTH = 80;
-const HORIZONTAL_PADDING = 60;
-
-// Channel label component
-const ChannelLabel: React.FC<{
-  channel: BaseItemDto;
-  typography: ReturnType<typeof useScaledTVTypography>;
-}> = ({ channel, typography }) => (
-  <View style={styles.channelLabel}>
-    <Text
-      numberOfLines={1}
-      style={[styles.channelNumber, { fontSize: typography.callout }]}
-    >
-      {channel.ChannelNumber}
-    </Text>
-    <Text
-      numberOfLines={1}
-      style={[styles.channelName, { fontSize: typography.callout }]}
-    >
-      {channel.Name}
-    </Text>
-  </View>
-);
-
-export const TVLiveTVGuide: React.FC = () => {
-  const { t } = useTranslation();
-  const typography = useScaledTVTypography();
-  const insets = useSafeAreaInsets();
-  const router = useRouter();
-  const api = useAtomValue(apiAtom);
-  const user = useAtomValue(userAtom);
-
-  const [currentPage, setCurrentPage] = useState(1);
-
-  // Scroll refs for synchronization
-  const channelListRef = useRef<ScrollView>(null);
-  const mainVerticalRef = useRef<ScrollView>(null);
-
-  // Focus guide refs for bidirectional navigation
-  const [firstProgramRef, setFirstProgramRef] = useState<View | null>(null);
-  const [prevButtonRef, setPrevButtonRef] = useState<View | null>(null);
-
-  // Base time - start of current hour, end time - end of day
-  const [{ baseTime, endOfDay, hoursToShow }] = useState(() => {
-    const now = new Date();
-    now.setMinutes(0, 0, 0);
-
-    const endOfDayTime = new Date(now);
-    endOfDayTime.setHours(23, 59, 59, 999);
-
-    const hoursUntilEndOfDay = Math.ceil(
-      (endOfDayTime.getTime() - now.getTime()) / (60 * 60 * 1000),
-    );
-
-    return {
-      baseTime: now,
-      endOfDay: endOfDayTime,
-      hoursToShow: Math.max(hoursUntilEndOfDay, 1), // At least 1 hour
-    };
-  });
-
-  // Current time indicator position (relative to program grid start)
-  const [currentTimeOffset, setCurrentTimeOffset] = useState(0);
-
-  // Update current time indicator every minute
-  useEffect(() => {
-    const updateCurrentTime = () => {
-      const now = new Date();
-      const diffMinutes = (now.getTime() - baseTime.getTime()) / 60000;
-      const offset = (diffMinutes / 60) * PIXELS_PER_HOUR;
-      setCurrentTimeOffset(offset);
-    };
-
-    updateCurrentTime();
-    const interval = setInterval(updateCurrentTime, 60000);
-    return () => clearInterval(interval);
-  }, [baseTime]);
-
-  // Sync vertical scroll between channel list and main grid
-  const handleVerticalScroll = useCallback(
-    (event: NativeSyntheticEvent<NativeScrollEvent>) => {
-      const offsetY = event.nativeEvent.contentOffset.y;
-      channelListRef.current?.scrollTo({ y: offsetY, animated: false });
-    },
-    [],
-  );
-
-  // Fetch channels
-  const { data: channelsData, isLoading: isLoadingChannels } = useQuery({
-    queryKey: ["livetv", "tv-guide", "channels"],
-    queryFn: async () => {
-      if (!api || !user?.Id) return null;
-      const res = await getLiveTvApi(api).getLiveTvChannels({
-        enableFavoriteSorting: true,
-        userId: user.Id,
-        addCurrentProgram: false,
-        enableUserData: false,
-        enableImageTypes: ["Primary"],
-      });
-      return res.data;
-    },
-    enabled: !!api && !!user?.Id,
-    staleTime: 5 * 60 * 1000, // 5 minutes
-  });
-
-  const totalChannels = channelsData?.TotalRecordCount ?? 0;
-  const totalPages = Math.ceil(totalChannels / CHANNELS_PER_PAGE);
-  const allChannels = channelsData?.Items ?? [];
-
-  // Get channels for current page
-  const paginatedChannels = useMemo(() => {
-    const startIndex = (currentPage - 1) * CHANNELS_PER_PAGE;
-    return allChannels.slice(startIndex, startIndex + CHANNELS_PER_PAGE);
-  }, [allChannels, currentPage]);
-
-  const channelIds = useMemo(
-    () => paginatedChannels.map((c) => c.Id).filter(Boolean) as string[],
-    [paginatedChannels],
-  );
-
-  // Fetch programs for visible channels
-  const { data: programsData, isLoading: isLoadingPrograms } = useQuery({
-    queryKey: [
-      "livetv",
-      "tv-guide",
-      "programs",
-      channelIds,
-      baseTime.toISOString(),
-      endOfDay.toISOString(),
-    ],
-    queryFn: async () => {
-      if (!api || channelIds.length === 0) return null;
-      const res = await getLiveTvApi(api).getPrograms({
-        getProgramsDto: {
-          MaxStartDate: endOfDay.toISOString(),
-          MinEndDate: baseTime.toISOString(),
-          ChannelIds: channelIds,
-          ImageTypeLimit: 1,
-          EnableImages: false,
-          SortBy: ["StartDate"],
-          EnableTotalRecordCount: false,
-          EnableUserData: false,
-        },
-      });
-      return res.data;
-    },
-    enabled: channelIds.length > 0,
-    staleTime: 2 * 60 * 1000, // 2 minutes
-  });
-
-  const programs = programsData?.Items ?? [];
-
-  // Group programs by channel
-  const programsByChannel = useMemo(() => {
-    const grouped: Record<string, BaseItemDto[]> = {};
-    for (const program of programs) {
-      const channelId = program.ChannelId;
-      if (channelId) {
-        if (!grouped[channelId]) {
-          grouped[channelId] = [];
-        }
-        grouped[channelId].push(program);
-      }
-    }
-    return grouped;
-  }, [programs]);
-
-  const handleProgramPress = useCallback(
-    (program: BaseItemDto) => {
-      // Navigate to play the program/channel
-      const queryParams = new URLSearchParams({
-        itemId: program.Id ?? "",
-        audioIndex: "",
-        subtitleIndex: "",
-        mediaSourceId: "",
-        bitrateValue: "",
-      });
-      router.push(`/player/direct-player?${queryParams.toString()}`);
-    },
-    [router],
-  );
-
-  const handlePreviousPage = useCallback(() => {
-    if (currentPage > 1) {
-      setCurrentPage((p) => p - 1);
-    }
-  }, [currentPage]);
-
-  const handleNextPage = useCallback(() => {
-    if (currentPage < totalPages) {
-      setCurrentPage((p) => p + 1);
-    }
-  }, [currentPage, totalPages]);
-
-  const isLoading = isLoadingChannels;
-  const totalWidth = hoursToShow * PIXELS_PER_HOUR;
-
-  if (isLoading) {
-    return (
-      <View style={styles.loadingContainer}>
-        <ActivityIndicator size='large' color='#FFFFFF' />
-      </View>
-    );
-  }
-
-  if (paginatedChannels.length === 0) {
-    return (
-      <View style={styles.emptyContainer}>
-        <Text style={[styles.emptyText, { fontSize: typography.body }]}>
-          {t("live_tv.no_programs")}
-        </Text>
-      </View>
-    );
-  }
-
-  return (
-    <View style={styles.container}>
-      {/* Page Navigation */}
-      {totalPages > 1 && (
-        <View style={{ paddingHorizontal: insets.left + HORIZONTAL_PADDING }}>
-          <TVGuidePageNavigation
-            currentPage={currentPage}
-            totalPages={totalPages}
-            onPrevious={handlePreviousPage}
-            onNext={handleNextPage}
-            prevButtonRefSetter={setPrevButtonRef}
-          />
-        </View>
-      )}
-
-      {/* Bidirectional focus guides */}
-      {firstProgramRef && (
-        <TVFocusGuideView
-          destinations={[firstProgramRef]}
-          style={{ height: 1, width: "100%" }}
-        />
-      )}
-      {prevButtonRef && (
-        <TVFocusGuideView
-          destinations={[prevButtonRef]}
-          style={{ height: 1, width: "100%" }}
-        />
-      )}
-
-      {/* Main grid container */}
-      <View style={styles.gridWrapper}>
-        {/* Fixed channel column */}
-        <View
-          style={[
-            styles.channelColumn,
-            {
-              width: CHANNEL_COLUMN_WIDTH,
-              marginLeft: insets.left + HORIZONTAL_PADDING,
-            },
-          ]}
-        >
-          {/* Spacer for time header */}
-          <View style={{ height: TIME_HEADER_HEIGHT }} />
-
-          {/* Channel labels - synced with main scroll */}
-          <ScrollView
-            ref={channelListRef}
-            scrollEnabled={false}
-            showsVerticalScrollIndicator={false}
-            contentContainerStyle={{ paddingBottom: insets.bottom + 60 }}
-          >
-            {paginatedChannels.map((channel, index) => (
-              <ChannelLabel
-                key={channel.Id ?? index}
-                channel={channel}
-                typography={typography}
-              />
-            ))}
-          </ScrollView>
-        </View>
-
-        {/* Scrollable programs area */}
-        <ScrollView
-          horizontal
-          showsHorizontalScrollIndicator={false}
-          style={styles.horizontalScroll}
-          contentContainerStyle={{
-            paddingRight: insets.right + HORIZONTAL_PADDING,
-          }}
-        >
-          <View style={{ width: totalWidth, position: "relative" }}>
-            {/* Time header */}
-            <TVGuideTimeHeader
-              baseTime={baseTime}
-              hoursToShow={hoursToShow}
-              pixelsPerHour={PIXELS_PER_HOUR}
-            />
-
-            {/* Programs grid - vertical scroll */}
-            <ScrollView
-              ref={mainVerticalRef}
-              onScroll={handleVerticalScroll}
-              scrollEventThrottle={16}
-              showsVerticalScrollIndicator={false}
-              contentContainerStyle={{ paddingBottom: insets.bottom + 60 }}
-            >
-              {paginatedChannels.map((channel, index) => {
-                const channelPrograms = channel.Id
-                  ? (programsByChannel[channel.Id] ?? [])
-                  : [];
-                return (
-                  <TVGuideChannelRow
-                    key={channel.Id ?? index}
-                    programs={channelPrograms}
-                    baseTime={baseTime}
-                    pixelsPerHour={PIXELS_PER_HOUR}
-                    minProgramWidth={MIN_PROGRAM_WIDTH}
-                    hoursToShow={hoursToShow}
-                    onProgramPress={handleProgramPress}
-                    firstProgramRefSetter={
-                      index === 0 ? setFirstProgramRef : undefined
-                    }
-                  />
-                );
-              })}
-            </ScrollView>
-
-            {/* Current time indicator */}
-            {currentTimeOffset > 0 && currentTimeOffset < totalWidth && (
-              <View
-                style={[
-                  styles.currentTimeIndicator,
-                  {
-                    left: currentTimeOffset,
-                    top: 0,
-                    height:
-                      TIME_HEADER_HEIGHT +
-                      paginatedChannels.length * ROW_HEIGHT,
-                  },
-                ]}
-              />
-            )}
-          </View>
-        </ScrollView>
-      </View>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  loadingContainer: {
-    flex: 1,
-    justifyContent: "center",
-    alignItems: "center",
-  },
-  emptyContainer: {
-    flex: 1,
-    justifyContent: "center",
-    alignItems: "center",
-  },
-  emptyText: {
-    color: "rgba(255, 255, 255, 0.6)",
-  },
-  gridWrapper: {
-    flex: 1,
-    flexDirection: "row",
-  },
-  channelColumn: {
-    backgroundColor: "rgba(40, 40, 40, 1)",
-    borderRightWidth: 1,
-    borderRightColor: "rgba(255, 255, 255, 0.2)",
-  },
-  channelLabel: {
-    height: ROW_HEIGHT,
-    justifyContent: "center",
-    paddingHorizontal: 12,
-    borderBottomWidth: 1,
-    borderBottomColor: "rgba(255, 255, 255, 0.2)",
-  },
-  channelNumber: {
-    color: "rgba(255, 255, 255, 0.5)",
-    fontWeight: "400",
-    marginBottom: 2,
-  },
-  channelName: {
-    color: "#FFFFFF",
-    fontWeight: "600",
-  },
-  horizontalScroll: {
-    flex: 1,
-  },
-  currentTimeIndicator: {
-    position: "absolute",
-    width: 2,
-    backgroundColor: "#EF4444",
-    zIndex: 10,
-    pointerEvents: "none",
-  },
-});
--- a/components/livetv/TVLiveTVPage.tsx
+++ b/components/livetv/TVLiveTVPage.tsx
@@ -1,265 +0,0 @@
-import { getLiveTvApi } from "@jellyfin/sdk/lib/utils/api";
-import { useAtomValue } from "jotai";
-import React, { useCallback, useMemo, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { ScrollView, View } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { Text } from "@/components/common/Text";
-import { InfiniteScrollingCollectionList } from "@/components/home/InfiniteScrollingCollectionList.tv";
-import { TVChannelsGrid } from "@/components/livetv/TVChannelsGrid";
-import { TVLiveTVGuide } from "@/components/livetv/TVLiveTVGuide";
-import { TVLiveTVPlaceholder } from "@/components/livetv/TVLiveTVPlaceholder";
-import { TVTabButton } from "@/components/tv/TVTabButton";
-import { useScaledTVTypography } from "@/constants/TVTypography";
-import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-
-const HORIZONTAL_PADDING = 60;
-const TOP_PADDING = 100;
-const SECTION_GAP = 24;
-
-type TabId =
-  | "programs"
-  | "guide"
-  | "channels"
-  | "recordings"
-  | "schedule"
-  | "series";
-
-interface Tab {
-  id: TabId;
-  labelKey: string;
-}
-
-const TABS: Tab[] = [
-  { id: "programs", labelKey: "live_tv.tabs.programs" },
-  { id: "guide", labelKey: "live_tv.tabs.guide" },
-  { id: "channels", labelKey: "live_tv.tabs.channels" },
-  { id: "recordings", labelKey: "live_tv.tabs.recordings" },
-  { id: "schedule", labelKey: "live_tv.tabs.schedule" },
-  { id: "series", labelKey: "live_tv.tabs.series" },
-];
-
-export const TVLiveTVPage: React.FC = () => {
-  const { t } = useTranslation();
-  const typography = useScaledTVTypography();
-  const insets = useSafeAreaInsets();
-  const api = useAtomValue(apiAtom);
-  const user = useAtomValue(userAtom);
-
-  const [activeTab, setActiveTab] = useState<TabId>("programs");
-
-  // Section configurations for Programs tab
-  const sections = useMemo(() => {
-    if (!api || !user?.Id) return [];
-
-    return [
-      {
-        title: t("live_tv.on_now"),
-        queryKey: ["livetv", "tv", "onNow"],
-        queryFn: async ({ pageParam = 0 }: { pageParam?: number }) => {
-          const res = await getLiveTvApi(api).getRecommendedPrograms({
-            userId: user.Id,
-            isAiring: true,
-            limit: 24,
-            imageTypeLimit: 1,
-            enableImageTypes: ["Primary", "Thumb", "Backdrop"],
-            enableTotalRecordCount: false,
-            fields: ["ChannelInfo", "PrimaryImageAspectRatio"],
-          });
-          const items = res.data.Items || [];
-          return items.slice(pageParam, pageParam + 10);
-        },
-      },
-      {
-        title: t("live_tv.shows"),
-        queryKey: ["livetv", "tv", "shows"],
-        queryFn: async ({ pageParam = 0 }: { pageParam?: number }) => {
-          const res = await getLiveTvApi(api).getLiveTvPrograms({
-            userId: user.Id,
-            hasAired: false,
-            limit: 24,
-            isMovie: false,
-            isSeries: true,
-            isSports: false,
-            isNews: false,
-            isKids: false,
-            enableTotalRecordCount: false,
-            fields: ["ChannelInfo", "PrimaryImageAspectRatio"],
-            enableImageTypes: ["Primary", "Thumb", "Backdrop"],
-          });
-          const items = res.data.Items || [];
-          return items.slice(pageParam, pageParam + 10);
-        },
-      },
-      {
-        title: t("live_tv.movies"),
-        queryKey: ["livetv", "tv", "movies"],
-        queryFn: async ({ pageParam = 0 }: { pageParam?: number }) => {
-          const res = await getLiveTvApi(api).getLiveTvPrograms({
-            userId: user.Id,
-            hasAired: false,
-            limit: 24,
-            isMovie: true,
-            enableTotalRecordCount: false,
-            fields: ["ChannelInfo"],
-            enableImageTypes: ["Primary", "Thumb", "Backdrop"],
-          });
-          const items = res.data.Items || [];
-          return items.slice(pageParam, pageParam + 10);
-        },
-      },
-      {
-        title: t("live_tv.sports"),
-        queryKey: ["livetv", "tv", "sports"],
-        queryFn: async ({ pageParam = 0 }: { pageParam?: number }) => {
-          const res = await getLiveTvApi(api).getLiveTvPrograms({
-            userId: user.Id,
-            hasAired: false,
-            limit: 24,
-            isSports: true,
-            enableTotalRecordCount: false,
-            fields: ["ChannelInfo"],
-            enableImageTypes: ["Primary", "Thumb", "Backdrop"],
-          });
-          const items = res.data.Items || [];
-          return items.slice(pageParam, pageParam + 10);
-        },
-      },
-      {
-        title: t("live_tv.for_kids"),
-        queryKey: ["livetv", "tv", "kids"],
-        queryFn: async ({ pageParam = 0 }: { pageParam?: number }) => {
-          const res = await getLiveTvApi(api).getLiveTvPrograms({
-            userId: user.Id,
-            hasAired: false,
-            limit: 24,
-            isKids: true,
-            enableTotalRecordCount: false,
-            fields: ["ChannelInfo"],
-            enableImageTypes: ["Primary", "Thumb", "Backdrop"],
-          });
-          const items = res.data.Items || [];
-          return items.slice(pageParam, pageParam + 10);
-        },
-      },
-      {
-        title: t("live_tv.news"),
-        queryKey: ["livetv", "tv", "news"],
-        queryFn: async ({ pageParam = 0 }: { pageParam?: number }) => {
-          const res = await getLiveTvApi(api).getLiveTvPrograms({
-            userId: user.Id,
-            hasAired: false,
-            limit: 24,
-            isNews: true,
-            enableTotalRecordCount: false,
-            fields: ["ChannelInfo"],
-            enableImageTypes: ["Primary", "Thumb", "Backdrop"],
-          });
-          const items = res.data.Items || [];
-          return items.slice(pageParam, pageParam + 10);
-        },
-      },
-    ];
-  }, [api, user?.Id, t]);
-
-  const handleTabSelect = useCallback((tabId: TabId) => {
-    setActiveTab(tabId);
-  }, []);
-
-  const renderProgramsContent = () => (
-    <ScrollView
-      nestedScrollEnabled
-      showsVerticalScrollIndicator={false}
-      contentContainerStyle={{
-        paddingTop: 24,
-        paddingBottom: insets.bottom + 60,
-      }}
-    >
-      <View
-        style={{
-          gap: SECTION_GAP,
-          paddingHorizontal: insets.left + HORIZONTAL_PADDING,
-        }}
-      >
-        {sections.map((section) => (
-          <InfiniteScrollingCollectionList
-            key={section.queryKey.join("-")}
-            title={section.title}
-            queryKey={section.queryKey}
-            queryFn={section.queryFn}
-            orientation='horizontal'
-            hideIfEmpty
-            pageSize={10}
-            enabled={true}
-            isFirstSection={false}
-          />
-        ))}
-      </View>
-    </ScrollView>
-  );
-
-  const renderTabContent = () => {
-    if (activeTab === "programs") {
-      return renderProgramsContent();
-    }
-
-    if (activeTab === "guide") {
-      return <TVLiveTVGuide />;
-    }
-
-    if (activeTab === "channels") {
-      return <TVChannelsGrid />;
-    }
-
-    // Placeholder for other tabs
-    const tab = TABS.find((t) => t.id === activeTab);
-    return <TVLiveTVPlaceholder tabName={t(tab?.labelKey || "")} />;
-  };
-
-  return (
-    <View style={{ flex: 1, backgroundColor: "#000000" }}>
-      {/* Header with Title and Tabs */}
-      <View
-        style={{
-          paddingTop: insets.top + TOP_PADDING,
-          paddingHorizontal: insets.left + HORIZONTAL_PADDING,
-          paddingBottom: 24,
-        }}
-      >
-        {/* Title */}
-        <Text
-          style={{
-            fontSize: typography.display,
-            fontWeight: "bold",
-            color: "#FFFFFF",
-            marginBottom: 24,
-          }}
-        >
-          Live TV
-        </Text>
-
-        {/* Tab Bar */}
-        <View
-          style={{
-            flexDirection: "row",
-            gap: 8,
-          }}
-        >
-          {TABS.map((tab) => (
-            <TVTabButton
-              key={tab.id}
-              label={t(tab.labelKey)}
-              active={activeTab === tab.id}
-              onSelect={() => handleTabSelect(tab.id)}
-              hasTVPreferredFocus={activeTab === tab.id}
-              switchOnFocus={true}
-            />
-          ))}
-        </View>
-      </View>
-
-      {/* Tab Content */}
-      <View style={{ flex: 1 }}>{renderTabContent()}</View>
-    </View>
-  );
-};
--- a/components/livetv/TVLiveTVPlaceholder.tsx
+++ b/components/livetv/TVLiveTVPlaceholder.tsx
@@ -1,46 +0,0 @@
-import React from "react";
-import { useTranslation } from "react-i18next";
-import { View } from "react-native";
-import { Text } from "@/components/common/Text";
-import { useScaledTVTypography } from "@/constants/TVTypography";
-
-interface TVLiveTVPlaceholderProps {
-  tabName: string;
-}
-
-export const TVLiveTVPlaceholder: React.FC<TVLiveTVPlaceholderProps> = ({
-  tabName,
-}) => {
-  const { t } = useTranslation();
-  const typography = useScaledTVTypography();
-
-  return (
-    <View
-      style={{
-        flex: 1,
-        justifyContent: "center",
-        alignItems: "center",
-        paddingHorizontal: 60,
-      }}
-    >
-      <Text
-        style={{
-          fontSize: typography.title,
-          fontWeight: "700",
-          color: "#FFFFFF",
-          marginBottom: 12,
-        }}
-      >
-        {tabName}
-      </Text>
-      <Text
-        style={{
-          fontSize: typography.body,
-          color: "rgba(255, 255, 255, 0.6)",
-        }}
-      >
-        {t("live_tv.coming_soon")}
-      </Text>
-    </View>
-  );
-};
--- a/components/login/Login.tsx
+++ b/components/login/Login.tsx
@@ -72,24 +72,22 @@ export const Login: React.FC = () => {
    password: string;
  } | null>(null);

-  // Handle URL params for server connection
  useEffect(() => {
    (async () => {
      if (_apiUrl) {
        await setServer({
          address: _apiUrl,
        });
+
+        setTimeout(() => {
+          if (_username && _password) {
+            setCredentials({ username: _username, password: _password });
+            login(_username, _password);
+          }
+        }, 0);
      }
    })();
-  }, [_apiUrl]);
-
-  // Handle auto-login when api is ready and credentials are provided via URL params
-  useEffect(() => {
-    if (api?.basePath && _apiUrl && _username && _password) {
-      setCredentials({ username: _username, password: _password });
-      login(_username, _password);
-    }
-  }, [api?.basePath, _apiUrl, _username, _password]);
+  }, [_apiUrl, _username, _password]);

  useEffect(() => {
    navigation.setOptions({
--- a/components/login/TVAccountCard.tsx
+++ b/components/login/TVAccountCard.tsx
@@ -3,6 +3,7 @@ import React, { useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Animated, Easing, Pressable, View } from "react-native";
 import { Text } from "@/components/common/Text";
+import { Colors } from "@/constants/Colors";
 import type { SavedServerAccount } from "@/utils/secureCredentials";

 interface TVAccountCardProps {
@@ -84,7 +85,7 @@ export const TVAccountCard: React.FC<TVAccountCardProps> = ({
        style={[
          {
            transform: [{ scale }],
-            shadowColor: "#fff",
+            shadowColor: "#a855f7",
            shadowOffset: { width: 0, height: 0 },
            shadowRadius: 16,
            elevation: 8,
@@ -142,7 +143,7 @@ export const TVAccountCard: React.FC<TVAccountCardProps> = ({
          </View>

          {/* Security Icon */}
-          <Ionicons name={getSecurityIcon()} size={24} color='#fff' />
+          <Ionicons name={getSecurityIcon()} size={24} color={Colors.primary} />
        </View>
      </Animated.View>
    </Pressable>
--- a/components/login/TVAddIcon.tsx
+++ b/components/login/TVAddIcon.tsx
@@ -1,82 +0,0 @@
-import { Ionicons } from "@expo/vector-icons";
-import React from "react";
-import { Animated, Pressable, View } from "react-native";
-import { Text } from "@/components/common/Text";
-import { useTVFocusAnimation } from "@/components/tv/hooks/useTVFocusAnimation";
-import { useScaledTVTypography } from "@/constants/TVTypography";
-
-export interface TVAddIconProps {
-  label: string;
-  onPress: () => void;
-  hasTVPreferredFocus?: boolean;
-  disabled?: boolean;
-}
-
-export const TVAddIcon = React.forwardRef<View, TVAddIconProps>(
-  ({ label, onPress, hasTVPreferredFocus, disabled = false }, ref) => {
-    const typography = useScaledTVTypography();
-    const { focused, handleFocus, handleBlur, animatedStyle } =
-      useTVFocusAnimation();
-
-    return (
-      <Pressable
-        ref={ref}
-        onPress={onPress}
-        onFocus={handleFocus}
-        onBlur={handleBlur}
-        hasTVPreferredFocus={hasTVPreferredFocus && !disabled}
-        disabled={disabled}
-        focusable={!disabled}
-      >
-        <Animated.View
-          style={[
-            animatedStyle,
-            {
-              alignItems: "center",
-              width: 160,
-              shadowColor: "#fff",
-              shadowOffset: { width: 0, height: 0 },
-              shadowOpacity: focused ? 0.5 : 0,
-              shadowRadius: focused ? 16 : 0,
-            },
-          ]}
-        >
-          <View
-            style={{
-              width: 140,
-              height: 140,
-              borderRadius: 70,
-              backgroundColor: focused
-                ? "rgba(255,255,255,0.15)"
-                : "rgba(255,255,255,0.05)",
-              marginBottom: 14,
-              borderWidth: 2,
-              borderColor: focused ? "#fff" : "rgba(255,255,255,0.3)",
-              borderStyle: "dashed",
-              justifyContent: "center",
-              alignItems: "center",
-            }}
-          >
-            <Ionicons
-              name='add'
-              size={56}
-              color={focused ? "#fff" : "rgba(255,255,255,0.5)"}
-            />
-          </View>
-
-          <Text
-            style={{
-              fontSize: typography.body,
-              fontWeight: "600",
-              color: focused ? "#fff" : "rgba(255,255,255,0.7)",
-              textAlign: "center",
-            }}
-            numberOfLines={2}
-          >
-            {label}
-          </Text>
-        </Animated.View>
-      </Pressable>
-    );
-  },
-);
--- a/components/login/TVAddServerForm.tsx
+++ b/components/login/TVAddServerForm.tsx
@@ -1,162 +0,0 @@
-import { Ionicons } from "@expo/vector-icons";
-import { t } from "i18next";
-import React, { useRef, useState } from "react";
-import { Animated, Easing, Pressable, ScrollView, View } from "react-native";
-import { Button } from "@/components/Button";
-import { Text } from "@/components/common/Text";
-import { useScaledTVTypography } from "@/constants/TVTypography";
-import { TVInput } from "./TVInput";
-
-interface TVAddServerFormProps {
-  onConnect: (url: string) => Promise<void>;
-  onBack: () => void;
-  loading?: boolean;
-  disabled?: boolean;
-}
-
-const TVBackButton: React.FC<{
-  onPress: () => void;
-  label: string;
-  disabled?: boolean;
-}> = ({ onPress, label, disabled = false }) => {
-  const [isFocused, setIsFocused] = useState(false);
-  const scale = useRef(new Animated.Value(1)).current;
-
-  const animateFocus = (focused: boolean) => {
-    Animated.timing(scale, {
-      toValue: focused ? 1.05 : 1,
-      duration: 150,
-      easing: Easing.out(Easing.quad),
-      useNativeDriver: true,
-    }).start();
-  };
-
-  return (
-    <Pressable
-      onPress={onPress}
-      onFocus={() => {
-        setIsFocused(true);
-        animateFocus(true);
-      }}
-      onBlur={() => {
-        setIsFocused(false);
-        animateFocus(false);
-      }}
-      style={{ alignSelf: "flex-start", marginBottom: 24 }}
-      disabled={disabled}
-      focusable={!disabled}
-    >
-      <Animated.View
-        style={{
-          transform: [{ scale }],
-          flexDirection: "row",
-          alignItems: "center",
-          paddingVertical: 8,
-          paddingHorizontal: 12,
-          borderRadius: 8,
-          backgroundColor: isFocused ? "#fff" : "rgba(255, 255, 255, 0.15)",
-        }}
-      >
-        <Ionicons
-          name='chevron-back'
-          size={28}
-          color={isFocused ? "#000" : "#fff"}
-        />
-        <Text
-          style={{
-            color: isFocused ? "#000" : "#fff",
-            fontSize: 20,
-            marginLeft: 4,
-          }}
-        >
-          {label}
-        </Text>
-      </Animated.View>
-    </Pressable>
-  );
-};
-
-export const TVAddServerForm: React.FC<TVAddServerFormProps> = ({
-  onConnect,
-  onBack,
-  loading = false,
-  disabled = false,
-}) => {
-  const typography = useScaledTVTypography();
-  const [serverURL, setServerURL] = useState("");
-
-  const handleConnect = async () => {
-    if (serverURL.trim()) {
-      await onConnect(serverURL.trim());
-    }
-  };
-
-  const isDisabled = disabled || loading;
-
-  return (
-    <ScrollView
-      style={{ flex: 1 }}
-      contentContainerStyle={{
-        flexGrow: 1,
-        justifyContent: "center",
-        alignItems: "center",
-        paddingVertical: 60,
-      }}
-      showsVerticalScrollIndicator={false}
-    >
-      <View
-        style={{
-          width: "100%",
-          maxWidth: 800,
-          paddingHorizontal: 60,
-        }}
-      >
-        {/* Back Button */}
-        <TVBackButton
-          onPress={onBack}
-          label={t("common.back")}
-          disabled={isDisabled}
-        />
-
-        {/* Server URL Input */}
-        <View style={{ marginBottom: 24, paddingHorizontal: 8 }}>
-          <TVInput
-            placeholder={t("server.server_url_placeholder")}
-            value={serverURL}
-            onChangeText={setServerURL}
-            keyboardType='url'
-            autoCapitalize='none'
-            textContentType='URL'
-            returnKeyType='done'
-            hasTVPreferredFocus
-            disabled={isDisabled}
-          />
-        </View>
-
-        {/* Connect Button */}
-        <View style={{ marginBottom: 24 }}>
-          <Button
-            onPress={handleConnect}
-            loading={loading}
-            disabled={loading || !serverURL.trim()}
-            color='white'
-          >
-            {t("server.connect_button")}
-          </Button>
-        </View>
-
-        {/* Hint text */}
-        <Text
-          style={{
-            fontSize: typography.callout,
-            color: "#6B7280",
-            textAlign: "left",
-            paddingHorizontal: 8,
-          }}
-        >
-          {t("server.enter_url_to_jellyfin_server")}
-        </Text>
-      </View>
-    </ScrollView>
-  );
-};
--- a/components/login/TVAddUserForm.tsx
+++ b/components/login/TVAddUserForm.tsx
@@ -1,230 +0,0 @@
-import { Ionicons } from "@expo/vector-icons";
-import { t } from "i18next";
-import React, { useRef, useState } from "react";
-import { Animated, Easing, Pressable, ScrollView, View } from "react-native";
-import { Button } from "@/components/Button";
-import { Text } from "@/components/common/Text";
-import { useScaledTVTypography } from "@/constants/TVTypography";
-import { TVInput } from "./TVInput";
-import { TVSaveAccountToggle } from "./TVSaveAccountToggle";
-
-interface TVAddUserFormProps {
-  serverName: string;
-  serverAddress: string;
-  onLogin: (
-    username: string,
-    password: string,
-    saveAccount: boolean,
-  ) => Promise<void>;
-  onQuickConnect: () => Promise<void>;
-  onBack: () => void;
-  loading?: boolean;
-  disabled?: boolean;
-}
-
-const TVBackButton: React.FC<{
-  onPress: () => void;
-  label: string;
-  disabled?: boolean;
-}> = ({ onPress, label, disabled = false }) => {
-  const [isFocused, setIsFocused] = useState(false);
-  const scale = useRef(new Animated.Value(1)).current;
-
-  const animateFocus = (focused: boolean) => {
-    Animated.timing(scale, {
-      toValue: focused ? 1.05 : 1,
-      duration: 150,
-      easing: Easing.out(Easing.quad),
-      useNativeDriver: true,
-    }).start();
-  };
-
-  return (
-    <Pressable
-      onPress={onPress}
-      onFocus={() => {
-        setIsFocused(true);
-        animateFocus(true);
-      }}
-      onBlur={() => {
-        setIsFocused(false);
-        animateFocus(false);
-      }}
-      style={{ alignSelf: "flex-start", marginBottom: 40 }}
-      disabled={disabled}
-      focusable={!disabled}
-    >
-      <Animated.View
-        style={{
-          transform: [{ scale }],
-          flexDirection: "row",
-          alignItems: "center",
-          paddingVertical: 8,
-          paddingHorizontal: 12,
-          borderRadius: 8,
-          backgroundColor: isFocused ? "#fff" : "rgba(255, 255, 255, 0.15)",
-        }}
-      >
-        <Ionicons
-          name='chevron-back'
-          size={28}
-          color={isFocused ? "#000" : "#fff"}
-        />
-        <Text
-          style={{
-            color: isFocused ? "#000" : "#fff",
-            fontSize: 20,
-            marginLeft: 4,
-          }}
-        >
-          {label}
-        </Text>
-      </Animated.View>
-    </Pressable>
-  );
-};
-
-export const TVAddUserForm: React.FC<TVAddUserFormProps> = ({
-  serverName,
-  serverAddress,
-  onLogin,
-  onQuickConnect,
-  onBack,
-  loading = false,
-  disabled = false,
-}) => {
-  const typography = useScaledTVTypography();
-  const [credentials, setCredentials] = useState({
-    username: "",
-    password: "",
-  });
-  const [saveAccount, setSaveAccount] = useState(false);
-
-  const handleLogin = async () => {
-    if (credentials.username.trim()) {
-      await onLogin(credentials.username, credentials.password, saveAccount);
-    }
-  };
-
-  const isDisabled = disabled || loading;
-
-  return (
-    <ScrollView
-      style={{ flex: 1 }}
-      contentContainerStyle={{
-        flexGrow: 1,
-        justifyContent: "center",
-        alignItems: "center",
-        paddingVertical: 60,
-      }}
-      showsVerticalScrollIndicator={false}
-    >
-      <View
-        style={{
-          width: "100%",
-          maxWidth: 800,
-          paddingHorizontal: 60,
-        }}
-      >
-        {/* Back Button */}
-        <TVBackButton
-          onPress={onBack}
-          label={t("common.back")}
-          disabled={isDisabled}
-        />
-
-        {/* Title */}
-        <Text
-          style={{
-            fontSize: typography.title,
-            fontWeight: "bold",
-            color: "#FFFFFF",
-            marginBottom: 8,
-          }}
-        >
-          {serverName ? (
-            <>
-              {`${t("login.login_to_title")} `}
-              <Text style={{ color: "#fff" }}>{serverName}</Text>
-            </>
-          ) : (
-            t("login.login_title")
-          )}
-        </Text>
-        <Text
-          style={{
-            fontSize: typography.callout,
-            color: "#9CA3AF",
-            marginBottom: 40,
-          }}
-        >
-          {serverAddress}
-        </Text>
-
-        {/* Username Input */}
-        <View style={{ marginBottom: 24, paddingHorizontal: 8 }}>
-          <TVInput
-            placeholder={t("login.username_placeholder")}
-            value={credentials.username}
-            onChangeText={(text) =>
-              setCredentials((prev) => ({ ...prev, username: text }))
-            }
-            autoCapitalize='none'
-            autoCorrect={false}
-            textContentType='username'
-            returnKeyType='next'
-            hasTVPreferredFocus
-            disabled={isDisabled}
-          />
-        </View>
-
-        {/* Password Input */}
-        <View style={{ marginBottom: 32, paddingHorizontal: 8 }}>
-          <TVInput
-            placeholder={t("login.password_placeholder")}
-            value={credentials.password}
-            onChangeText={(text) =>
-              setCredentials((prev) => ({ ...prev, password: text }))
-            }
-            secureTextEntry
-            autoCapitalize='none'
-            textContentType='password'
-            returnKeyType='done'
-            disabled={isDisabled}
-          />
-        </View>
-
-        {/* Save Account Toggle */}
-        <View style={{ marginBottom: 40, paddingHorizontal: 8 }}>
-          <TVSaveAccountToggle
-            value={saveAccount}
-            onValueChange={setSaveAccount}
-            label={t("save_account.save_for_later")}
-            disabled={isDisabled}
-          />
-        </View>
-
-        {/* Login Button */}
-        <View style={{ marginBottom: 16 }}>
-          <Button
-            onPress={handleLogin}
-            loading={loading}
-            disabled={!credentials.username.trim() || loading}
-            color='white'
-          >
-            {t("login.login_button")}
-          </Button>
-        </View>
-
-        {/* Quick Connect Button */}
-        <Button
-          onPress={onQuickConnect}
-          color='black'
-          className='bg-neutral-800 border border-neutral-700'
-        >
-          {t("login.quick_connect")}
-        </Button>
-      </View>
-    </ScrollView>
-  );
-};
--- a/components/login/TVBackIcon.tsx
+++ b/components/login/TVBackIcon.tsx
@@ -1,82 +0,0 @@
-import { Ionicons } from "@expo/vector-icons";
-import React from "react";
-import { Animated, Pressable, View } from "react-native";
-import { Text } from "@/components/common/Text";
-import { useTVFocusAnimation } from "@/components/tv/hooks/useTVFocusAnimation";
-import { useScaledTVTypography } from "@/constants/TVTypography";
-
-export interface TVBackIconProps {
-  label: string;
-  onPress: () => void;
-  hasTVPreferredFocus?: boolean;
-  disabled?: boolean;
-}
-
-export const TVBackIcon = React.forwardRef<View, TVBackIconProps>(
-  ({ label, onPress, hasTVPreferredFocus, disabled = false }, ref) => {
-    const typography = useScaledTVTypography();
-    const { focused, handleFocus, handleBlur, animatedStyle } =
-      useTVFocusAnimation();
-
-    return (
-      <Pressable
-        ref={ref}
-        onPress={onPress}
-        onFocus={handleFocus}
-        onBlur={handleBlur}
-        hasTVPreferredFocus={hasTVPreferredFocus && !disabled}
-        disabled={disabled}
-        focusable={!disabled}
-      >
-        <Animated.View
-          style={[
-            animatedStyle,
-            {
-              alignItems: "center",
-              width: 160,
-              shadowColor: "#fff",
-              shadowOffset: { width: 0, height: 0 },
-              shadowOpacity: focused ? 0.5 : 0,
-              shadowRadius: focused ? 16 : 0,
-            },
-          ]}
-        >
-          <View
-            style={{
-              width: 140,
-              height: 140,
-              borderRadius: 70,
-              backgroundColor: focused
-                ? "rgba(255,255,255,0.15)"
-                : "rgba(255,255,255,0.05)",
-              marginBottom: 14,
-              borderWidth: 2,
-              borderColor: focused ? "#fff" : "rgba(255,255,255,0.3)",
-              borderStyle: "dashed",
-              justifyContent: "center",
-              alignItems: "center",
-            }}
-          >
-            <Ionicons
-              name='arrow-back'
-              size={56}
-              color={focused ? "#fff" : "rgba(255,255,255,0.5)"}
-            />
-          </View>
-
-          <Text
-            style={{
-              fontSize: typography.body,
-              fontWeight: "600",
-              color: focused ? "#fff" : "rgba(255,255,255,0.7)",
-              textAlign: "center",
-            }}
-            numberOfLines={2}
-          >
-            {label}
-          </Text>
-        </Animated.View>
-      </Pressable>
-    );
-  },
-);
--- a/components/login/TVInput.tsx
+++ b/components/login/TVInput.tsx
@@ -58,25 +58,20 @@ export const TVInput: React.FC<TVInputProps> = ({
      <Animated.View
        style={{
          transform: [{ scale }],
-          borderRadius: 12,
-          backgroundColor: isFocused
-            ? "rgba(255,255,255,0.15)"
-            : "rgba(255,255,255,0.08)",
-          borderWidth: 2,
-          borderColor: isFocused ? "#FFFFFF" : "transparent",
+          borderRadius: 10,
+          borderWidth: 3,
+          borderColor: isFocused ? "#FFFFFF" : "#333333",
        }}
      >
        <TextInput
          ref={inputRef}
          placeholder={displayPlaceholder}
-          placeholderTextColor='rgba(255,255,255,0.35)'
          allowFontScaling={false}
          style={[
            {
-              height: 64,
-              fontSize: 22,
+              height: 68,
+              fontSize: 24,
              color: "#FFFFFF",
-              paddingHorizontal: 20,
            },
            style,
          ]}
--- a/components/login/TVLogin.tsx
+++ b/components/login/TVLogin.tsx
--- a/components/login/TVPINEntryModal.tsx
+++ b/components/login/TVPINEntryModal.tsx
@@ -1,4 +1,3 @@
-import { Ionicons } from "@expo/vector-icons";
 import { BlurView } from "expo-blur";
 import React, { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -12,6 +11,8 @@ import {
  View,
 } from "react-native";
 import { Text } from "@/components/common/Text";
+import { TVPinInput, type TVPinInputRef } from "@/components/inputs/TVPinInput";
+import { useTVFocusAnimation } from "@/components/tv";
 import { verifyAccountPIN } from "@/utils/secureCredentials";

 interface TVPINEntryModalProps {
@@ -24,122 +25,40 @@ interface TVPINEntryModalProps {
  username: string;
 }

-// Number pad button
-const NumberPadButton: React.FC<{
-  value: string;
+// Forgot PIN Button
+const TVForgotPINButton: React.FC<{
  onPress: () => void;
+  label: string;
  hasTVPreferredFocus?: boolean;
-  isBackspace?: boolean;
-  disabled?: boolean;
-}> = ({ value, onPress, hasTVPreferredFocus, isBackspace, disabled }) => {
-  const [focused, setFocused] = useState(false);
-  const scale = useRef(new Animated.Value(1)).current;
-
-  const animateTo = (v: number) =>
-    Animated.timing(scale, {
-      toValue: v,
-      duration: 100,
-      easing: Easing.out(Easing.quad),
-      useNativeDriver: true,
-    }).start();
+}> = ({ onPress, label, hasTVPreferredFocus = false }) => {
+  const { focused, handleFocus, handleBlur, animatedStyle } =
+    useTVFocusAnimation({ scaleAmount: 1.05, duration: 120 });

  return (
    <Pressable
      onPress={onPress}
-      onFocus={() => {
-        setFocused(true);
-        animateTo(1.1);
-      }}
-      onBlur={() => {
-        setFocused(false);
-        animateTo(1);
-      }}
+      onFocus={handleFocus}
+      onBlur={handleBlur}
      hasTVPreferredFocus={hasTVPreferredFocus}
-      disabled={disabled}
-      focusable={!disabled}
    >
      <Animated.View
        style={[
-          styles.numberButton,
+          animatedStyle,
          {
-            transform: [{ scale }],
-            backgroundColor: focused ? "#fff" : "rgba(255,255,255,0.1)",
+            paddingHorizontal: 16,
+            paddingVertical: 10,
+            borderRadius: 8,
+            backgroundColor: focused
+              ? "rgba(168, 85, 247, 0.2)"
+              : "transparent",
          },
        ]}
-      >
-        {isBackspace ? (
-          <Ionicons
-            name='backspace-outline'
-            size={28}
-            color={focused ? "#000" : "#fff"}
-          />
-        ) : (
-          <Text
-            style={[styles.numberText, { color: focused ? "#000" : "#fff" }]}
-          >
-            {value}
-          </Text>
-        )}
-      </Animated.View>
-    </Pressable>
-  );
-};
-
-// PIN dot indicator
-const PinDot: React.FC<{ filled: boolean; error: boolean }> = ({
-  filled,
-  error,
-}) => (
-  <View
-    style={[
-      styles.pinDot,
-      filled && styles.pinDotFilled,
-      error && styles.pinDotError,
-    ]}
-  />
-);
-
-// Forgot PIN link
-const ForgotPINLink: React.FC<{
-  onPress: () => void;
-  label: string;
-}> = ({ onPress, label }) => {
-  const [focused, setFocused] = useState(false);
-  const scale = useRef(new Animated.Value(1)).current;
-
-  const animateTo = (v: number) =>
-    Animated.timing(scale, {
-      toValue: v,
-      duration: 100,
-      easing: Easing.out(Easing.quad),
-      useNativeDriver: true,
-    }).start();
-
-  return (
-    <Pressable
-      onPress={onPress}
-      onFocus={() => {
-        setFocused(true);
-        animateTo(1.05);
-      }}
-      onBlur={() => {
-        setFocused(false);
-        animateTo(1);
-      }}
-    >
-      <Animated.View
-        style={{
-          transform: [{ scale }],
-          paddingHorizontal: 16,
-          paddingVertical: 10,
-          borderRadius: 8,
-          backgroundColor: focused ? "rgba(255,255,255,0.15)" : "transparent",
-        }}
      >
        <Text
          style={{
            fontSize: 16,
-            color: focused ? "#fff" : "rgba(255,255,255,0.5)",
+            color: focused ? "#d8b4fe" : "#a855f7",
+            fontWeight: "500",
          }}
        >
          {label}
@@ -161,21 +80,23 @@ export const TVPINEntryModal: React.FC<TVPINEntryModalProps> = ({
  const { t } = useTranslation();
  const [isReady, setIsReady] = useState(false);
  const [pinCode, setPinCode] = useState("");
-  const [error, setError] = useState(false);
+  const [error, setError] = useState<string | null>(null);
  const [isVerifying, setIsVerifying] = useState(false);
+  const pinInputRef = useRef<TVPinInputRef>(null);

  const overlayOpacity = useRef(new Animated.Value(0)).current;
-  const contentScale = useRef(new Animated.Value(0.9)).current;
+  const sheetTranslateY = useRef(new Animated.Value(200)).current;
  const shakeAnimation = useRef(new Animated.Value(0)).current;

  useEffect(() => {
    if (visible) {
+      // Reset state when opening
      setPinCode("");
-      setError(false);
+      setError(null);
      setIsVerifying(false);

      overlayOpacity.setValue(0);
-      contentScale.setValue(0.9);
+      sheetTranslateY.setValue(200);

      Animated.parallel([
        Animated.timing(overlayOpacity, {
@@ -184,19 +105,32 @@ export const TVPINEntryModal: React.FC<TVPINEntryModalProps> = ({
          easing: Easing.out(Easing.quad),
          useNativeDriver: true,
        }),
-        Animated.timing(contentScale, {
-          toValue: 1,
+        Animated.timing(sheetTranslateY, {
+          toValue: 0,
          duration: 300,
          easing: Easing.out(Easing.cubic),
          useNativeDriver: true,
        }),
      ]).start();
+    }
+  }, [visible, overlayOpacity, sheetTranslateY]);

+  useEffect(() => {
+    if (visible) {
      const timer = setTimeout(() => setIsReady(true), 100);
      return () => clearTimeout(timer);
    }
    setIsReady(false);
-  }, [visible, overlayOpacity, contentScale]);
+  }, [visible]);
+
+  useEffect(() => {
+    if (visible && isReady) {
+      const timer = setTimeout(() => {
+        pinInputRef.current?.focus();
+      }, 150);
+      return () => clearTimeout(timer);
+    }
+  }, [visible, isReady]);

  const shake = () => {
    Animated.sequence([
@@ -223,42 +157,33 @@ export const TVPINEntryModal: React.FC<TVPINEntryModalProps> = ({
    ]).start();
  };

-  const handleNumberPress = async (num: string) => {
-    if (isVerifying || pinCode.length >= 4) return;
-
-    setError(false);
-    const newPin = pinCode + num;
-    setPinCode(newPin);
+  const handlePinChange = async (value: string) => {
+    setPinCode(value);
+    setError(null);

    // Auto-verify when 4 digits entered
-    if (newPin.length === 4) {
+    if (value.length === 4) {
      setIsVerifying(true);
      try {
-        const isValid = await verifyAccountPIN(serverUrl, userId, newPin);
+        const isValid = await verifyAccountPIN(serverUrl, userId, value);
        if (isValid) {
          onSuccess();
          setPinCode("");
        } else {
-          setError(true);
+          setError(t("pin.invalid_pin"));
          shake();
-          setTimeout(() => setPinCode(""), 300);
+          setPinCode("");
        }
      } catch {
-        setError(true);
+        setError(t("pin.invalid_pin"));
        shake();
-        setTimeout(() => setPinCode(""), 300);
+        setPinCode("");
      } finally {
        setIsVerifying(false);
      }
    }
  };

-  const handleBackspace = () => {
-    if (isVerifying) return;
-    setError(false);
-    setPinCode((prev) => prev.slice(0, -1));
-  };
-
  const handleForgotPIN = () => {
    Alert.alert(t("pin.forgot_pin"), t("pin.forgot_pin_desc"), [
      { text: t("common.cancel"), style: "cancel" },
@@ -279,11 +204,11 @@ export const TVPINEntryModal: React.FC<TVPINEntryModalProps> = ({
    <Animated.View style={[styles.overlay, { opacity: overlayOpacity }]}>
      <Animated.View
        style={[
-          styles.contentContainer,
-          { transform: [{ scale: contentScale }] },
+          styles.sheetContainer,
+          { transform: [{ translateY: sheetTranslateY }] },
        ]}
      >
-        <BlurView intensity={60} tint='dark' style={styles.blurContainer}>
+        <BlurView intensity={80} tint='dark' style={styles.blurContainer}>
          <TVFocusGuideView
            autoFocus
            trapFocusUp
@@ -293,103 +218,44 @@ export const TVPINEntryModal: React.FC<TVPINEntryModalProps> = ({
            style={styles.content}
          >
            {/* Header */}
-            <Text style={styles.title}>{t("pin.enter_pin")}</Text>
-            <Text style={styles.subtitle}>{username}</Text>
+            <View style={styles.header}>
+              <Text style={styles.title}>{t("pin.enter_pin")}</Text>
+              <Text style={styles.subtitle}>
+                {t("pin.enter_pin_for", { username })}
+              </Text>
+            </View>

-            {/* PIN Dots */}
-            <Animated.View
-              style={[
-                styles.pinDotsContainer,
-                { transform: [{ translateX: shakeAnimation }] },
-              ]}
-            >
-              {[0, 1, 2, 3].map((i) => (
-                <PinDot key={i} filled={pinCode.length > i} error={error} />
-              ))}
-            </Animated.View>
-
-            {/* Number Pad */}
+            {/* PIN Input */}
            {isReady && (
-              <View style={styles.numberPad}>
-                {/* Row 1: 1-3 */}
-                <View style={styles.numberRow}>
-                  <NumberPadButton
-                    value='1'
-                    onPress={() => handleNumberPress("1")}
-                    hasTVPreferredFocus
-                    disabled={isVerifying}
-                  />
-                  <NumberPadButton
-                    value='2'
-                    onPress={() => handleNumberPress("2")}
-                    disabled={isVerifying}
-                  />
-                  <NumberPadButton
-                    value='3'
-                    onPress={() => handleNumberPress("3")}
-                    disabled={isVerifying}
-                  />
-                </View>
-                {/* Row 2: 4-6 */}
-                <View style={styles.numberRow}>
-                  <NumberPadButton
-                    value='4'
-                    onPress={() => handleNumberPress("4")}
-                    disabled={isVerifying}
-                  />
-                  <NumberPadButton
-                    value='5'
-                    onPress={() => handleNumberPress("5")}
-                    disabled={isVerifying}
-                  />
-                  <NumberPadButton
-                    value='6'
-                    onPress={() => handleNumberPress("6")}
-                    disabled={isVerifying}
-                  />
-                </View>
-                {/* Row 3: 7-9 */}
-                <View style={styles.numberRow}>
-                  <NumberPadButton
-                    value='7'
-                    onPress={() => handleNumberPress("7")}
-                    disabled={isVerifying}
-                  />
-                  <NumberPadButton
-                    value='8'
-                    onPress={() => handleNumberPress("8")}
-                    disabled={isVerifying}
-                  />
-                  <NumberPadButton
-                    value='9'
-                    onPress={() => handleNumberPress("9")}
-                    disabled={isVerifying}
-                  />
-                </View>
-                {/* Row 4: empty, 0, backspace */}
-                <View style={styles.numberRow}>
-                  <View style={styles.numberButtonPlaceholder} />
-                  <NumberPadButton
-                    value='0'
-                    onPress={() => handleNumberPress("0")}
-                    disabled={isVerifying}
-                  />
-                  <NumberPadButton
-                    value=''
-                    onPress={handleBackspace}
-                    isBackspace
-                    disabled={isVerifying || pinCode.length === 0}
-                  />
-                </View>
-              </View>
+              <Animated.View
+                style={[
+                  styles.pinContainer,
+                  { transform: [{ translateX: shakeAnimation }] },
+                ]}
+              >
+                <TVPinInput
+                  ref={pinInputRef}
+                  value={pinCode}
+                  onChangeText={handlePinChange}
+                  length={4}
+                  autoFocus
+                />
+                {error && <Text style={styles.errorText}>{error}</Text>}
+                {isVerifying && (
+                  <Text style={styles.verifyingText}>
+                    {t("common.verifying")}
+                  </Text>
+                )}
+              </Animated.View>
            )}

            {/* Forgot PIN */}
            {isReady && onForgotPIN && (
              <View style={styles.forgotContainer}>
-                <ForgotPINLink
+                <TVForgotPINButton
                  onPress={handleForgotPIN}
                  label={t("pin.forgot_pin")}
+                  hasTVPreferredFocus
                />
              </View>
            )}
@@ -407,81 +273,55 @@ const styles = StyleSheet.create({
    left: 0,
    right: 0,
    bottom: 0,
-    backgroundColor: "rgba(0, 0, 0, 0.8)",
-    justifyContent: "center",
-    alignItems: "center",
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
+    justifyContent: "flex-end",
    zIndex: 1000,
  },
-  contentContainer: {
+  sheetContainer: {
    width: "100%",
-    maxWidth: 400,
  },
  blurContainer: {
-    borderRadius: 24,
+    borderTopLeftRadius: 24,
+    borderTopRightRadius: 24,
    overflow: "hidden",
  },
  content: {
-    padding: 40,
-    alignItems: "center",
+    paddingTop: 24,
+    paddingBottom: 50,
+    overflow: "visible",
+  },
+  header: {
+    paddingHorizontal: 48,
+    marginBottom: 24,
  },
  title: {
    fontSize: 28,
    fontWeight: "bold",
    color: "#fff",
-    marginBottom: 8,
-    textAlign: "center",
+    marginBottom: 4,
  },
  subtitle: {
-    fontSize: 18,
+    fontSize: 16,
    color: "rgba(255,255,255,0.6)",
-    marginBottom: 32,
+  },
+  pinContainer: {
+    paddingHorizontal: 48,
+    alignItems: "center",
+    marginBottom: 16,
+  },
+  errorText: {
+    color: "#ef4444",
+    fontSize: 14,
+    marginTop: 16,
    textAlign: "center",
  },
-  pinDotsContainer: {
-    flexDirection: "row",
-    gap: 16,
-    marginBottom: 32,
-  },
-  pinDot: {
-    width: 20,
-    height: 20,
-    borderRadius: 10,
-    borderWidth: 2,
-    borderColor: "rgba(255,255,255,0.4)",
-    backgroundColor: "transparent",
-  },
-  pinDotFilled: {
-    backgroundColor: "#fff",
-    borderColor: "#fff",
-  },
-  pinDotError: {
-    borderColor: "#ef4444",
-    backgroundColor: "#ef4444",
-  },
-  numberPad: {
-    gap: 12,
-    marginBottom: 24,
-  },
-  numberRow: {
-    flexDirection: "row",
-    gap: 12,
-  },
-  numberButton: {
-    width: 72,
-    height: 72,
-    borderRadius: 36,
-    justifyContent: "center",
-    alignItems: "center",
-  },
-  numberButtonPlaceholder: {
-    width: 72,
-    height: 72,
-  },
-  numberText: {
-    fontSize: 28,
-    fontWeight: "600",
+  verifyingText: {
+    color: "rgba(255,255,255,0.6)",
+    fontSize: 14,
+    marginTop: 16,
+    textAlign: "center",
  },
  forgotContainer: {
-    marginTop: 8,
+    alignItems: "center",
  },
 });
--- a/components/login/TVPasswordEntryModal.tsx
+++ b/components/login/TVPasswordEntryModal.tsx
@@ -47,10 +47,10 @@ const TVSubmitButton: React.FC<{
          animatedStyle,
          {
            backgroundColor: focused
-              ? "#fff"
+              ? "#a855f7"
              : isDisabled
                ? "#4a4a4a"
-                : "rgba(255,255,255,0.15)",
+                : "#7c3aed",
            paddingHorizontal: 24,
            paddingVertical: 14,
            borderRadius: 10,
@@ -64,18 +64,14 @@ const TVSubmitButton: React.FC<{
        ]}
      >
        {loading ? (
-          <ActivityIndicator size='small' color={focused ? "#000" : "#fff"} />
+          <ActivityIndicator size='small' color='#fff' />
        ) : (
          <>
-            <Ionicons
-              name='log-in-outline'
-              size={20}
-              color={focused ? "#000" : "#fff"}
-            />
+            <Ionicons name='log-in-outline' size={20} color='#fff' />
            <Text
              style={{
                fontSize: 16,
-                color: focused ? "#000" : "#fff",
+                color: "#fff",
                fontWeight: "600",
              }}
            >
@@ -123,7 +119,7 @@ const TVPasswordInput: React.FC<{
            backgroundColor: "#1F2937",
            borderRadius: 12,
            borderWidth: 2,
-            borderColor: focused ? "#fff" : "#374151",
+            borderColor: focused ? "#6366F1" : "#374151",
            paddingHorizontal: 16,
            paddingVertical: 14,
          },
@@ -249,16 +245,14 @@ export const TVPasswordEntryModal: React.FC<TVPasswordEntryModalProps> = ({
            {/* Password Input */}
            {isReady && (
              <View style={styles.inputContainer}>
-                <Text style={styles.inputLabel}>
-                  {t("login.password_placeholder")}
-                </Text>
+                <Text style={styles.inputLabel}>{t("login.password")}</Text>
                <TVPasswordInput
                  value={password}
                  onChangeText={(text) => {
                    setPassword(text);
                    setError(null);
                  }}
-                  placeholder={t("login.password_placeholder")}
+                  placeholder={t("login.password")}
                  onSubmitEditing={handleSubmit}
                  hasTVPreferredFocus
                />
--- a/components/login/TVPreviousServersList.tsx
+++ b/components/login/TVPreviousServersList.tsx
@@ -0,0 +1,512 @@
+import { Ionicons } from "@expo/vector-icons";
+import { BlurView } from "expo-blur";
+import type React from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  Alert,
+  Animated,
+  Easing,
+  Modal,
+  Pressable,
+  ScrollView,
+  View,
+} from "react-native";
+import { useMMKVString } from "react-native-mmkv";
+import { Button } from "@/components/Button";
+import { Text } from "@/components/common/Text";
+import {
+  deleteAccountCredential,
+  getPreviousServers,
+  type SavedServer,
+  type SavedServerAccount,
+} from "@/utils/secureCredentials";
+import { TVAccountCard } from "./TVAccountCard";
+import { TVServerCard } from "./TVServerCard";
+
+// Action card for server action sheet (Apple TV style)
+const TVServerActionCard: React.FC<{
+  label: string;
+  icon: keyof typeof Ionicons.glyphMap;
+  variant?: "default" | "destructive";
+  hasTVPreferredFocus?: boolean;
+  onPress: () => void;
+}> = ({ label, icon, variant = "default", hasTVPreferredFocus, onPress }) => {
+  const [focused, setFocused] = useState(false);
+  const scale = useRef(new Animated.Value(1)).current;
+
+  const animateTo = (v: number) =>
+    Animated.timing(scale, {
+      toValue: v,
+      duration: 150,
+      easing: Easing.out(Easing.quad),
+      useNativeDriver: true,
+    }).start();
+
+  const isDestructive = variant === "destructive";
+
+  return (
+    <Pressable
+      onPress={onPress}
+      onFocus={() => {
+        setFocused(true);
+        animateTo(1.05);
+      }}
+      onBlur={() => {
+        setFocused(false);
+        animateTo(1);
+      }}
+      hasTVPreferredFocus={hasTVPreferredFocus}
+    >
+      <Animated.View
+        style={{
+          transform: [{ scale }],
+          width: 180,
+          height: 90,
+          backgroundColor: focused
+            ? isDestructive
+              ? "#ef4444"
+              : "#fff"
+            : isDestructive
+              ? "rgba(239, 68, 68, 0.2)"
+              : "rgba(255,255,255,0.08)",
+          borderRadius: 14,
+          justifyContent: "center",
+          alignItems: "center",
+          paddingHorizontal: 12,
+          gap: 8,
+        }}
+      >
+        <Ionicons
+          name={icon}
+          size={28}
+          color={
+            focused
+              ? isDestructive
+                ? "#fff"
+                : "#000"
+              : isDestructive
+                ? "#ef4444"
+                : "#fff"
+          }
+        />
+        <Text
+          style={{
+            fontSize: 16,
+            color: focused
+              ? isDestructive
+                ? "#fff"
+                : "#000"
+              : isDestructive
+                ? "#ef4444"
+                : "#fff",
+            fontWeight: "600",
+            textAlign: "center",
+          }}
+          numberOfLines={1}
+        >
+          {label}
+        </Text>
+      </Animated.View>
+    </Pressable>
+  );
+};
+
+// Server action sheet component (bottom sheet with horizontal scrolling)
+const TVServerActionSheet: React.FC<{
+  visible: boolean;
+  server: SavedServer | null;
+  onLogin: () => void;
+  onDelete: () => void;
+  onClose: () => void;
+}> = ({ visible, server, onLogin, onDelete, onClose }) => {
+  const { t } = useTranslation();
+
+  if (!server) return null;
+
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      animationType='fade'
+      onRequestClose={onClose}
+    >
+      <View
+        style={{
+          flex: 1,
+          backgroundColor: "rgba(0, 0, 0, 0.5)",
+          justifyContent: "flex-end",
+        }}
+      >
+        <BlurView
+          intensity={80}
+          tint='dark'
+          style={{
+            borderTopLeftRadius: 24,
+            borderTopRightRadius: 24,
+            overflow: "hidden",
+          }}
+        >
+          <View
+            style={{
+              paddingTop: 24,
+              paddingBottom: 50,
+              overflow: "visible",
+            }}
+          >
+            {/* Title */}
+            <Text
+              style={{
+                fontSize: 18,
+                fontWeight: "500",
+                color: "rgba(255,255,255,0.6)",
+                marginBottom: 8,
+                paddingHorizontal: 48,
+                textTransform: "uppercase",
+                letterSpacing: 1,
+              }}
+            >
+              {server.name || server.address}
+            </Text>
+
+            {/* Horizontal options */}
+            <ScrollView
+              horizontal
+              showsHorizontalScrollIndicator={false}
+              style={{ overflow: "visible" }}
+              contentContainerStyle={{
+                paddingHorizontal: 48,
+                paddingVertical: 10,
+                gap: 12,
+              }}
+            >
+              <TVServerActionCard
+                label={t("common.login")}
+                icon='log-in-outline'
+                hasTVPreferredFocus
+                onPress={onLogin}
+              />
+              <TVServerActionCard
+                label={t("common.delete")}
+                icon='trash-outline'
+                variant='destructive'
+                onPress={onDelete}
+              />
+              <TVServerActionCard
+                label={t("common.cancel")}
+                icon='close-outline'
+                onPress={onClose}
+              />
+            </ScrollView>
+          </View>
+        </BlurView>
+      </View>
+    </Modal>
+  );
+};
+
+interface TVPreviousServersListProps {
+  onServerSelect: (server: SavedServer) => void;
+  onQuickLogin?: (serverUrl: string, userId: string) => Promise<void>;
+  onPasswordLogin?: (
+    serverUrl: string,
+    username: string,
+    password: string,
+  ) => Promise<void>;
+  onAddAccount?: (server: SavedServer) => void;
+  onPinRequired?: (server: SavedServer, account: SavedServerAccount) => void;
+  onPasswordRequired?: (
+    server: SavedServer,
+    account: SavedServerAccount,
+  ) => void;
+  // Called when server is pressed to show action sheet (handled by parent)
+  onServerAction?: (server: SavedServer) => void;
+  // Called by parent when "Login" is selected from action sheet
+  loginServerOverride?: SavedServer | null;
+  // Disable all focusable elements (when a modal is open)
+  disabled?: boolean;
+}
+
+// Export the action sheet for use in parent components
+export { TVServerActionSheet };
+
+export const TVPreviousServersList: React.FC<TVPreviousServersListProps> = ({
+  onServerSelect,
+  onQuickLogin,
+  onAddAccount,
+  onPinRequired,
+  onPasswordRequired,
+  onServerAction,
+  loginServerOverride,
+  disabled = false,
+}) => {
+  const { t } = useTranslation();
+  const [_previousServers, setPreviousServers] =
+    useMMKVString("previousServers");
+  const [loadingServer, setLoadingServer] = useState<string | null>(null);
+  const [selectedServer, setSelectedServer] = useState<SavedServer | null>(
+    null,
+  );
+  const [showAccountsModal, setShowAccountsModal] = useState(false);
+
+  const previousServers = useMemo(() => {
+    return JSON.parse(_previousServers || "[]") as SavedServer[];
+  }, [_previousServers]);
+
+  // When parent triggers login via loginServerOverride, execute the login flow
+  useEffect(() => {
+    if (loginServerOverride) {
+      const accountCount = loginServerOverride.accounts?.length || 0;
+
+      if (accountCount === 0) {
+        onServerSelect(loginServerOverride);
+      } else if (accountCount === 1) {
+        handleAccountLogin(
+          loginServerOverride,
+          loginServerOverride.accounts[0],
+        );
+      } else {
+        setSelectedServer(loginServerOverride);
+        setShowAccountsModal(true);
+      }
+    }
+  }, [loginServerOverride]);
+
+  const refreshServers = () => {
+    const servers = getPreviousServers();
+    setPreviousServers(JSON.stringify(servers));
+  };
+
+  const handleAccountLogin = async (
+    server: SavedServer,
+    account: SavedServerAccount,
+  ) => {
+    setShowAccountsModal(false);
+
+    switch (account.securityType) {
+      case "none":
+        if (onQuickLogin) {
+          setLoadingServer(server.address);
+          try {
+            await onQuickLogin(server.address, account.userId);
+          } catch {
+            Alert.alert(
+              t("server.session_expired"),
+              t("server.please_login_again"),
+              [{ text: t("common.ok"), onPress: () => onServerSelect(server) }],
+            );
+          } finally {
+            setLoadingServer(null);
+          }
+        }
+        break;
+
+      case "pin":
+        if (onPinRequired) {
+          onPinRequired(server, account);
+        }
+        break;
+
+      case "password":
+        if (onPasswordRequired) {
+          onPasswordRequired(server, account);
+        }
+        break;
+    }
+  };
+
+  const handleServerPress = (server: SavedServer) => {
+    if (loadingServer) return;
+
+    // If onServerAction is provided, delegate to parent for action sheet handling
+    if (onServerAction) {
+      onServerAction(server);
+      return;
+    }
+
+    // Fallback: direct login flow (for backwards compatibility)
+    const accountCount = server.accounts?.length || 0;
+    if (accountCount === 0) {
+      onServerSelect(server);
+    } else if (accountCount === 1) {
+      handleAccountLogin(server, server.accounts[0]);
+    } else {
+      setSelectedServer(server);
+      setShowAccountsModal(true);
+    }
+  };
+
+  const getServerSubtitle = (server: SavedServer): string | undefined => {
+    const accountCount = server.accounts?.length || 0;
+
+    if (accountCount > 1) {
+      return t("server.accounts_count", { count: accountCount });
+    }
+    if (accountCount === 1) {
+      return `${server.accounts[0].username} • ${t("server.saved")}`;
+    }
+    return server.name ? server.address : undefined;
+  };
+
+  const getSecurityIcon = (
+    server: SavedServer,
+  ): keyof typeof Ionicons.glyphMap | null => {
+    const accountCount = server.accounts?.length || 0;
+    if (accountCount === 0) return null;
+
+    if (accountCount > 1) {
+      return "people";
+    }
+
+    const account = server.accounts[0];
+    switch (account.securityType) {
+      case "pin":
+        return "keypad";
+      case "password":
+        return "lock-closed";
+      default:
+        return "key";
+    }
+  };
+
+  const handleDeleteAccount = async (account: SavedServerAccount) => {
+    if (!selectedServer) return;
+
+    Alert.alert(
+      t("server.remove_saved_login"),
+      t("server.remove_account_description", { username: account.username }),
+      [
+        { text: t("common.cancel"), style: "cancel" },
+        {
+          text: t("common.remove"),
+          style: "destructive",
+          onPress: async () => {
+            await deleteAccountCredential(
+              selectedServer.address,
+              account.userId,
+            );
+            refreshServers();
+            if (selectedServer.accounts.length <= 1) {
+              setShowAccountsModal(false);
+            }
+          },
+        },
+      ],
+    );
+  };
+
+  if (!previousServers.length) return null;
+
+  return (
+    <View style={{ marginTop: 32 }}>
+      <Text
+        style={{
+          fontSize: 24,
+          fontWeight: "600",
+          color: "#FFFFFF",
+          marginBottom: 16,
+        }}
+      >
+        {t("server.previous_servers")}
+      </Text>
+
+      <View style={{ gap: 12 }}>
+        {previousServers.map((server) => (
+          <TVServerCard
+            key={server.address}
+            title={server.name || server.address}
+            subtitle={getServerSubtitle(server)}
+            securityIcon={getSecurityIcon(server)}
+            isLoading={loadingServer === server.address}
+            onPress={() => handleServerPress(server)}
+            disabled={disabled}
+          />
+        ))}
+      </View>
+
+      {/* TV Account Selection Modal */}
+      <Modal
+        visible={showAccountsModal}
+        transparent
+        animationType='fade'
+        onRequestClose={() => setShowAccountsModal(false)}
+      >
+        <View
+          style={{
+            flex: 1,
+            backgroundColor: "rgba(0, 0, 0, 0.9)",
+            justifyContent: "center",
+            alignItems: "center",
+            padding: 80,
+          }}
+        >
+          <View
+            style={{
+              backgroundColor: "#1a1a1a",
+              borderRadius: 24,
+              padding: 40,
+              width: "100%",
+              maxWidth: 700,
+            }}
+          >
+            <Text
+              style={{
+                fontSize: 32,
+                fontWeight: "bold",
+                color: "#FFFFFF",
+                marginBottom: 8,
+              }}
+            >
+              {t("server.select_account")}
+            </Text>
+            <Text
+              style={{
+                fontSize: 18,
+                color: "#9CA3AF",
+                marginBottom: 32,
+              }}
+            >
+              {selectedServer?.name || selectedServer?.address}
+            </Text>
+
+            <View style={{ gap: 12, marginBottom: 24 }}>
+              {selectedServer?.accounts.map((account, index) => (
+                <TVAccountCard
+                  key={account.userId}
+                  account={account}
+                  onPress={() =>
+                    selectedServer &&
+                    handleAccountLogin(selectedServer, account)
+                  }
+                  onLongPress={() => handleDeleteAccount(account)}
+                  hasTVPreferredFocus={index === 0}
+                />
+              ))}
+            </View>
+
+            <View style={{ gap: 12 }}>
+              <Button
+                onPress={() => {
+                  setShowAccountsModal(false);
+                  if (selectedServer && onAddAccount) {
+                    onAddAccount(selectedServer);
+                  }
+                }}
+                color='purple'
+              >
+                {t("server.add_account")}
+              </Button>
+              <Button
+                onPress={() => setShowAccountsModal(false)}
+                color='black'
+                className='bg-neutral-800'
+              >
+                {t("common.cancel")}
+              </Button>
+            </View>
+          </View>
+        </View>
+      </Modal>
+    </View>
+  );
+};
--- a/components/login/TVSaveAccountModal.tsx
+++ b/components/login/TVSaveAccountModal.tsx
@@ -75,10 +75,10 @@ const TVSaveButton: React.FC<{
          animatedStyle,
          {
            backgroundColor: focused
-              ? "#fff"
+              ? "#a855f7"
              : disabled
                ? "#4a4a4a"
-                : "rgba(255,255,255,0.15)",
+                : "#7c3aed",
            paddingHorizontal: 24,
            paddingVertical: 14,
            borderRadius: 10,
@@ -89,15 +89,11 @@ const TVSaveButton: React.FC<{
          },
        ]}
      >
-        <Ionicons
-          name='checkmark'
-          size={20}
-          color={focused ? "#000" : "#fff"}
-        />
+        <Ionicons name='checkmark' size={20} color='#fff' />
        <Text
          style={{
            fontSize: 16,
-            color: focused ? "#000" : "#fff",
+            color: "#fff",
            fontWeight: "600",
          }}
        >
--- a/components/login/TVSaveAccountToggle.tsx
+++ b/components/login/TVSaveAccountToggle.tsx
@@ -1,6 +1,7 @@
 import React, { useRef, useState } from "react";
 import { Animated, Easing, Pressable, View } from "react-native";
 import { Text } from "@/components/common/Text";
+import { Colors } from "@/constants/Colors";

 interface TVSaveAccountToggleProps {
  value: boolean;
@@ -61,7 +62,7 @@ export const TVSaveAccountToggle: React.FC<TVSaveAccountToggleProps> = ({
        style={[
          {
            transform: [{ scale }],
-            shadowColor: "#fff",
+            shadowColor: "#a855f7",
            shadowOffset: { width: 0, height: 0 },
            shadowRadius: 16,
            elevation: 8,
@@ -96,7 +97,7 @@ export const TVSaveAccountToggle: React.FC<TVSaveAccountToggleProps> = ({
              width: 60,
              height: 34,
              borderRadius: 17,
-              backgroundColor: value ? "#fff" : "#3f3f46",
+              backgroundColor: value ? Colors.primary : "#3f3f46",
              justifyContent: "center",
              paddingHorizontal: 3,
            }}
@@ -106,7 +107,7 @@ export const TVSaveAccountToggle: React.FC<TVSaveAccountToggleProps> = ({
                width: 28,
                height: 28,
                borderRadius: 14,
-                backgroundColor: value ? "#000" : "#fff",
+                backgroundColor: "white",
                alignSelf: value ? "flex-end" : "flex-start",
              }}
            />
--- a/components/login/TVServerCard.tsx
+++ b/components/login/TVServerCard.tsx
@@ -0,0 +1,153 @@
+import { Ionicons } from "@expo/vector-icons";
+import React, { useRef, useState } from "react";
+import {
+  ActivityIndicator,
+  Animated,
+  Easing,
+  Pressable,
+  View,
+} from "react-native";
+import { Text } from "@/components/common/Text";
+import { Colors } from "@/constants/Colors";
+
+interface TVServerCardProps {
+  title: string;
+  subtitle?: string;
+  securityIcon?: keyof typeof Ionicons.glyphMap | null;
+  isLoading?: boolean;
+  onPress: () => void;
+  hasTVPreferredFocus?: boolean;
+  disabled?: boolean;
+}
+
+export const TVServerCard: React.FC<TVServerCardProps> = ({
+  title,
+  subtitle,
+  securityIcon,
+  isLoading,
+  onPress,
+  hasTVPreferredFocus,
+  disabled = false,
+}) => {
+  const [isFocused, setIsFocused] = useState(false);
+  const scale = useRef(new Animated.Value(1)).current;
+  const glowOpacity = useRef(new Animated.Value(0)).current;
+
+  const animateFocus = (focused: boolean) => {
+    Animated.parallel([
+      Animated.timing(scale, {
+        toValue: focused ? 1.02 : 1,
+        duration: 150,
+        easing: Easing.out(Easing.quad),
+        useNativeDriver: true,
+      }),
+      Animated.timing(glowOpacity, {
+        toValue: focused ? 0.7 : 0,
+        duration: 150,
+        easing: Easing.out(Easing.quad),
+        useNativeDriver: true,
+      }),
+    ]).start();
+  };
+
+  const handleFocus = () => {
+    setIsFocused(true);
+    animateFocus(true);
+  };
+
+  const handleBlur = () => {
+    setIsFocused(false);
+    animateFocus(false);
+  };
+
+  const isDisabled = disabled || isLoading;
+
+  return (
+    <Pressable
+      onPress={onPress}
+      onFocus={handleFocus}
+      onBlur={handleBlur}
+      disabled={isDisabled}
+      focusable={!isDisabled}
+      hasTVPreferredFocus={hasTVPreferredFocus && !isDisabled}
+    >
+      <Animated.View
+        style={[
+          {
+            transform: [{ scale }],
+            shadowColor: "#a855f7",
+            shadowOffset: { width: 0, height: 0 },
+            shadowRadius: 16,
+            elevation: 8,
+          },
+          { shadowOpacity: glowOpacity },
+        ]}
+      >
+        <View
+          style={{
+            backgroundColor: isFocused ? "#2a2a2a" : "#1a1a1a",
+            borderWidth: 2,
+            borderColor: isFocused ? "#FFFFFF" : "transparent",
+            borderRadius: 16,
+            paddingHorizontal: 24,
+            paddingVertical: 20,
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "space-between",
+          }}
+        >
+          <View style={{ flex: 1 }}>
+            <Text
+              style={{
+                fontSize: 22,
+                fontWeight: "600",
+                color: "#FFFFFF",
+              }}
+              numberOfLines={1}
+            >
+              {title}
+            </Text>
+            {subtitle && (
+              <Text
+                style={{
+                  fontSize: 16,
+                  color: "#9CA3AF",
+                  marginTop: 4,
+                }}
+                numberOfLines={1}
+              >
+                {subtitle}
+              </Text>
+            )}
+          </View>
+
+          <View style={{ marginLeft: 16 }}>
+            {isLoading ? (
+              <ActivityIndicator size='small' color={Colors.primary} />
+            ) : securityIcon ? (
+              <View style={{ flexDirection: "row", alignItems: "center" }}>
+                <Ionicons
+                  name={securityIcon}
+                  size={20}
+                  color={Colors.primary}
+                  style={{ marginRight: 8 }}
+                />
+                <Ionicons
+                  name='chevron-forward'
+                  size={24}
+                  color={isFocused ? "#FFFFFF" : "#6B7280"}
+                />
+              </View>
+            ) : (
+              <Ionicons
+                name='chevron-forward'
+                size={24}
+                color={isFocused ? "#FFFFFF" : "#6B7280"}
+              />
+            )}
+          </View>
+        </View>
+      </Animated.View>
+    </Pressable>
+  );
+};
--- a/components/login/TVServerIcon.tsx
+++ b/components/login/TVServerIcon.tsx
@@ -1,211 +0,0 @@
-import { LinearGradient } from "expo-linear-gradient";
-import React, { useMemo } from "react";
-import { Animated, Pressable, View } from "react-native";
-import { Text } from "@/components/common/Text";
-import { useTVFocusAnimation } from "@/components/tv/hooks/useTVFocusAnimation";
-import { useScaledTVTypography } from "@/constants/TVTypography";
-
-// Sci-fi gradient color pairs (from, to) - cyberpunk/neon vibes
-const SERVER_GRADIENTS: [string, string][] = [
-  ["#00D4FF", "#0066FF"], // Cyan to Blue
-  ["#FF00E5", "#7B00FF"], // Magenta to Purple
-  ["#00FF94", "#00B4D8"], // Neon Green to Cyan
-  ["#FF6B35", "#F72585"], // Orange to Pink
-  ["#4CC9F0", "#7209B7"], // Sky Blue to Violet
-  ["#06D6A0", "#118AB2"], // Mint to Ocean Blue
-  ["#FFD60A", "#FF006E"], // Yellow to Hot Pink
-  ["#8338EC", "#3A86FF"], // Purple to Blue
-  ["#FB5607", "#FFBE0B"], // Orange to Gold
-  ["#00F5D4", "#00BBF9"], // Aqua to Azure
-  ["#F15BB5", "#9B5DE5"], // Pink to Lavender
-  ["#00C49A", "#00509D"], // Teal to Navy
-  ["#E63946", "#F4A261"], // Red to Peach
-  ["#2EC4B6", "#011627"], // Turquoise to Dark Blue
-  ["#FF0099", "#493240"], // Hot Pink to Plum
-  ["#11998E", "#38EF7D"], // Teal to Lime
-  ["#FC466B", "#3F5EFB"], // Pink to Indigo
-  ["#C471ED", "#12C2E9"], // Orchid to Sky
-  ["#F857A6", "#FF5858"], // Pink to Coral
-  ["#00B09B", "#96C93D"], // Emerald to Lime
-  ["#7F00FF", "#E100FF"], // Violet to Magenta
-  ["#1FA2FF", "#12D8FA"], // Blue to Cyan
-  ["#F09819", "#EDDE5D"], // Orange to Yellow
-  ["#FF416C", "#FF4B2B"], // Pink to Red Orange
-  ["#654EA3", "#EAAFC8"], // Purple to Rose
-  ["#00C6FF", "#0072FF"], // Light Blue to Blue
-  ["#F7971E", "#FFD200"], // Orange to Gold
-  ["#56AB2F", "#A8E063"], // Green to Lime
-  ["#DA22FF", "#9733EE"], // Magenta to Purple
-  ["#02AAB0", "#00CDAC"], // Teal variations
-  ["#ED213A", "#93291E"], // Red to Dark Red
-  ["#FDC830", "#F37335"], // Yellow to Orange
-  ["#00B4DB", "#0083B0"], // Ocean Blue
-  ["#C33764", "#1D2671"], // Berry to Navy
-  ["#E55D87", "#5FC3E4"], // Pink to Sky Blue
-  ["#403B4A", "#E7E9BB"], // Dark to Cream
-  ["#F2709C", "#FF9472"], // Rose to Peach
-  ["#1D976C", "#93F9B9"], // Forest to Mint
-  ["#CC2B5E", "#753A88"], // Crimson to Purple
-  ["#42275A", "#734B6D"], // Plum shades
-  ["#BDC3C7", "#2C3E50"], // Silver to Slate
-  ["#DE6262", "#FFB88C"], // Salmon to Apricot
-  ["#06BEB6", "#48B1BF"], // Teal shades
-  ["#EB3349", "#F45C43"], // Red to Orange Red
-  ["#DD5E89", "#F7BB97"], // Pink to Tan
-  ["#56CCF2", "#2F80ED"], // Sky to Blue
-  ["#007991", "#78FFD6"], // Deep Teal to Mint
-  ["#C6FFDD", "#FBD786"], // Mint to Yellow
-  ["#F953C6", "#B91D73"], // Pink to Magenta
-  ["#B24592", "#F15F79"], // Purple to Coral
-];
-
-// Generate a consistent gradient index based on URL (deterministic hash)
-// Uses cyrb53 hash - fast and good distribution
-const getGradientForString = (str: string): [string, string] => {
-  let h1 = 0xdeadbeef;
-  let h2 = 0x41c6ce57;
-  for (let i = 0; i < str.length; i++) {
-    const ch = str.charCodeAt(i);
-    h1 = Math.imul(h1 ^ ch, 2654435761);
-    h2 = Math.imul(h2 ^ ch, 1597334677);
-  }
-  h1 = Math.imul(h1 ^ (h1 >>> 16), 2246822507);
-  h1 ^= Math.imul(h2 ^ (h2 >>> 13), 3266489909);
-  h2 = Math.imul(h2 ^ (h2 >>> 16), 2246822507);
-  h2 ^= Math.imul(h1 ^ (h1 >>> 13), 3266489909);
-  const hash = 4294967296 * (2097151 & h2) + (h1 >>> 0);
-  const index = Math.abs(hash) % SERVER_GRADIENTS.length;
-  return SERVER_GRADIENTS[index];
-};
-
-export interface TVServerIconProps {
-  name: string;
-  address: string;
-  onPress: () => void;
-  onLongPress?: () => void;
-  hasTVPreferredFocus?: boolean;
-  disabled?: boolean;
-}
-
-export const TVServerIcon = React.forwardRef<View, TVServerIconProps>(
-  (
-    {
-      name,
-      address,
-      onPress,
-      onLongPress,
-      hasTVPreferredFocus,
-      disabled = false,
-    },
-    ref,
-  ) => {
-    const typography = useScaledTVTypography();
-    const { focused, handleFocus, handleBlur, animatedStyle } =
-      useTVFocusAnimation();
-
-    // Get the first letter of the server name (or address if no name)
-    const displayName = name || address;
-    const initial = displayName.charAt(0).toUpperCase();
-
-    // Get a consistent gradient based on the server URL (deterministic)
-    // Use address as primary key, fallback to name + displayName for uniqueness
-    const hashKey = address || name || displayName;
-    const [gradientStart, gradientEnd] = useMemo(
-      () => getGradientForString(hashKey),
-      [hashKey],
-    );
-
-    return (
-      <Pressable
-        ref={ref}
-        onPress={onPress}
-        onLongPress={onLongPress}
-        onFocus={handleFocus}
-        onBlur={handleBlur}
-        hasTVPreferredFocus={hasTVPreferredFocus && !disabled}
-        disabled={disabled}
-        focusable={!disabled}
-      >
-        <Animated.View
-          style={[
-            animatedStyle,
-            {
-              alignItems: "center",
-              width: 160,
-              shadowColor: gradientStart,
-              shadowOffset: { width: 0, height: 0 },
-              shadowOpacity: focused ? 0.7 : 0,
-              shadowRadius: focused ? 24 : 0,
-            },
-          ]}
-        >
-          <View
-            style={{
-              width: 140,
-              height: 140,
-              borderRadius: 70,
-              overflow: "hidden",
-              marginBottom: 14,
-              borderWidth: focused ? 3 : 0,
-              borderColor: "#fff",
-            }}
-          >
-            <LinearGradient
-              colors={[gradientStart, gradientEnd]}
-              start={{ x: 0, y: 0 }}
-              end={{ x: 1, y: 1 }}
-              style={{
-                width: "100%",
-                height: "100%",
-                justifyContent: "center",
-                alignItems: "center",
-                opacity: focused ? 1 : 0.85,
-              }}
-            >
-              <Text
-                style={{
-                  fontSize: 48,
-                  fontWeight: "bold",
-                  color: "#fff",
-                  textShadowColor: "rgba(0,0,0,0.3)",
-                  textShadowOffset: { width: 0, height: 2 },
-                  textShadowRadius: 4,
-                }}
-              >
-                {initial}
-              </Text>
-            </LinearGradient>
-          </View>
-
-          <Text
-            style={{
-              fontSize: typography.body,
-              fontWeight: "600",
-              color: focused ? "#fff" : "rgba(255,255,255,0.9)",
-              textAlign: "center",
-              marginBottom: 4,
-            }}
-            numberOfLines={2}
-          >
-            {displayName}
-          </Text>
-
-          {name && (
-            <Text
-              style={{
-                fontSize: typography.callout,
-                color: focused
-                  ? "rgba(255,255,255,0.8)"
-                  : "rgba(255,255,255,0.5)",
-                textAlign: "center",
-              }}
-              numberOfLines={1}
-            >
-              {address.replace(/^https?:\/\//, "")}
-            </Text>
-          )}
-        </Animated.View>
-      </Pressable>
-    );
-  },
-);
--- a/components/login/TVServerSelectionScreen.tsx
+++ b/components/login/TVServerSelectionScreen.tsx
@@ -1,137 +0,0 @@
-import { Image } from "expo-image";
-import { t } from "i18next";
-import React, { useMemo } from "react";
-import { Alert, ScrollView, View } from "react-native";
-import { useMMKVString } from "react-native-mmkv";
-import { Text } from "@/components/common/Text";
-import { useScaledTVTypography } from "@/constants/TVTypography";
-import type { SavedServer } from "@/utils/secureCredentials";
-import { TVAddIcon } from "./TVAddIcon";
-import { TVServerIcon } from "./TVServerIcon";
-
-interface TVServerSelectionScreenProps {
-  onServerSelect: (server: SavedServer) => void;
-  onAddServer: () => void;
-  onDeleteServer: (server: SavedServer) => void;
-  disabled?: boolean;
-}
-
-export const TVServerSelectionScreen: React.FC<
-  TVServerSelectionScreenProps
-> = ({ onServerSelect, onAddServer, onDeleteServer, disabled = false }) => {
-  const typography = useScaledTVTypography();
-  const [_previousServers] = useMMKVString("previousServers");
-
-  const previousServers = useMemo(() => {
-    try {
-      return JSON.parse(_previousServers || "[]") as SavedServer[];
-    } catch {
-      return [];
-    }
-  }, [_previousServers]);
-
-  const hasServers = previousServers.length > 0;
-
-  const handleDeleteServer = (server: SavedServer) => {
-    Alert.alert(
-      t("server.remove_server"),
-      t("server.remove_server_description", {
-        server: server.name || server.address,
-      }),
-      [
-        { text: t("common.cancel"), style: "cancel" },
-        {
-          text: t("common.delete"),
-          style: "destructive",
-          onPress: () => onDeleteServer(server),
-        },
-      ],
-    );
-  };
-
-  return (
-    <ScrollView
-      style={{ flex: 1 }}
-      contentContainerStyle={{
-        flexGrow: 1,
-        justifyContent: "center",
-        alignItems: "center",
-        paddingVertical: 60,
-      }}
-      showsVerticalScrollIndicator={false}
-    >
-      <View
-        style={{
-          width: "100%",
-          alignItems: "center",
-          paddingHorizontal: 60,
-        }}
-      >
-        {/* Logo */}
-        <View style={{ alignItems: "center", marginBottom: 16 }}>
-          <Image
-            source={require("@/assets/images/icon-ios-plain.png")}
-            style={{ width: 150, height: 150 }}
-            contentFit='contain'
-          />
-        </View>
-
-        {/* Title */}
-        <Text
-          style={{
-            fontSize: typography.title,
-            fontWeight: "bold",
-            color: "#FFFFFF",
-            textAlign: "center",
-            marginBottom: 8,
-          }}
-        >
-          Streamyfin
-        </Text>
-        <Text
-          style={{
-            fontSize: typography.body,
-            color: "#9CA3AF",
-            textAlign: "center",
-            marginBottom: 48,
-          }}
-        >
-          {hasServers
-            ? t("server.select_your_server")
-            : t("server.add_server_to_get_started")}
-        </Text>
-
-        {/* Server Icons Grid */}
-        <ScrollView
-          horizontal
-          showsHorizontalScrollIndicator={false}
-          contentContainerStyle={{
-            paddingHorizontal: 20,
-            gap: 24,
-          }}
-          style={{ overflow: "visible" }}
-        >
-          {previousServers.map((server, index) => (
-            <TVServerIcon
-              key={server.address}
-              name={server.name || ""}
-              address={server.address}
-              onPress={() => onServerSelect(server)}
-              onLongPress={() => handleDeleteServer(server)}
-              hasTVPreferredFocus={index === 0}
-              disabled={disabled}
-            />
-          ))}
-
-          {/* Add Server Button */}
-          <TVAddIcon
-            label={t("server.add_server")}
-            onPress={onAddServer}
-            hasTVPreferredFocus={!hasServers}
-            disabled={disabled}
-          />
-        </ScrollView>
-      </View>
-    </ScrollView>
-  );
-};
--- a/components/login/TVUserIcon.tsx
+++ b/components/login/TVUserIcon.tsx
@@ -1,162 +0,0 @@
-import { Ionicons } from "@expo/vector-icons";
-import { Image } from "expo-image";
-import React, { useState } from "react";
-import { Animated, Pressable, View } from "react-native";
-import { Text } from "@/components/common/Text";
-import { useTVFocusAnimation } from "@/components/tv/hooks/useTVFocusAnimation";
-import { useScaledTVTypography } from "@/constants/TVTypography";
-import { getUserImageUrl } from "@/utils/jellyfin/image/getUserImageUrl";
-import type { AccountSecurityType } from "@/utils/secureCredentials";
-
-export interface TVUserIconProps {
-  username: string;
-  securityType: AccountSecurityType;
-  onPress: () => void;
-  hasTVPreferredFocus?: boolean;
-  disabled?: boolean;
-  serverAddress?: string;
-  userId?: string;
-  primaryImageTag?: string;
-}
-
-export const TVUserIcon = React.forwardRef<View, TVUserIconProps>(
-  (
-    {
-      username,
-      securityType,
-      onPress,
-      hasTVPreferredFocus,
-      disabled = false,
-      serverAddress,
-      userId,
-      primaryImageTag,
-    },
-    ref,
-  ) => {
-    const typography = useScaledTVTypography();
-    const { focused, handleFocus, handleBlur, animatedStyle } =
-      useTVFocusAnimation();
-    const [imageError, setImageError] = useState(false);
-
-    const getSecurityIcon = (): keyof typeof Ionicons.glyphMap => {
-      switch (securityType) {
-        case "pin":
-          return "keypad";
-        case "password":
-          return "lock-closed";
-        default:
-          return "key";
-      }
-    };
-
-    const hasSecurityProtection = securityType !== "none";
-
-    const imageUrl =
-      serverAddress && userId && primaryImageTag && !imageError
-        ? getUserImageUrl({
-            serverAddress,
-            userId,
-            primaryImageTag,
-            width: 280,
-          })
-        : null;
-
-    return (
-      <Pressable
-        ref={ref}
-        onPress={onPress}
-        onFocus={handleFocus}
-        onBlur={handleBlur}
-        hasTVPreferredFocus={hasTVPreferredFocus && !disabled}
-        disabled={disabled}
-        focusable={!disabled}
-      >
-        <Animated.View
-          style={[
-            animatedStyle,
-            {
-              alignItems: "center",
-              width: 160,
-              overflow: "visible",
-              shadowColor: "#fff",
-              shadowOffset: { width: 0, height: 0 },
-              shadowOpacity: focused ? 0.5 : 0,
-              shadowRadius: focused ? 16 : 0,
-            },
-          ]}
-        >
-          <View style={{ position: "relative" }}>
-            <View
-              style={{
-                width: 140,
-                height: 140,
-                borderRadius: 70,
-                overflow: "hidden",
-                backgroundColor: focused
-                  ? "rgba(255,255,255,0.2)"
-                  : "rgba(255,255,255,0.1)",
-                marginBottom: 14,
-                borderWidth: focused ? 3 : 0,
-                borderColor: "#fff",
-                justifyContent: "center",
-                alignItems: "center",
-              }}
-            >
-              {imageUrl ? (
-                <Image
-                  source={{ uri: imageUrl }}
-                  style={{ width: 140, height: 140 }}
-                  contentFit='cover'
-                  onError={() => setImageError(true)}
-                />
-              ) : (
-                <Ionicons
-                  name='person'
-                  size={56}
-                  color={
-                    focused ? "rgba(255,255,255,0.6)" : "rgba(255,255,255,0.4)"
-                  }
-                />
-              )}
-            </View>
-
-            {/* Security badge */}
-            {hasSecurityProtection && (
-              <View
-                style={{
-                  position: "absolute",
-                  bottom: 10,
-                  right: 10,
-                  width: 32,
-                  height: 32,
-                  borderRadius: 16,
-                  backgroundColor: focused ? "#fff" : "rgba(255,255,255,0.9)",
-                  justifyContent: "center",
-                  alignItems: "center",
-                  shadowColor: "#000",
-                  shadowOffset: { width: 0, height: 2 },
-                  shadowOpacity: 0.3,
-                  shadowRadius: 4,
-                }}
-              >
-                <Ionicons name={getSecurityIcon()} size={16} color='#000' />
-              </View>
-            )}
-          </View>
-
-          <Text
-            style={{
-              fontSize: typography.body,
-              fontWeight: "600",
-              color: focused ? "#fff" : "rgba(255,255,255,0.9)",
-              textAlign: "center",
-            }}
-            numberOfLines={2}
-          >
-            {username}
-          </Text>
-        </Animated.View>
-      </Pressable>
-    );
-  },
-);
--- a/components/login/TVUserSelectionScreen.tsx
+++ b/components/login/TVUserSelectionScreen.tsx
@@ -1,171 +0,0 @@
-import { t } from "i18next";
-import React, { useEffect } from "react";
-import { BackHandler, Platform, ScrollView, View } from "react-native";
-import { Text } from "@/components/common/Text";
-import { useScaledTVTypography } from "@/constants/TVTypography";
-import type {
-  SavedServer,
-  SavedServerAccount,
-} from "@/utils/secureCredentials";
-import { TVAddIcon } from "./TVAddIcon";
-import { TVBackIcon } from "./TVBackIcon";
-import { TVUserIcon } from "./TVUserIcon";
-
-interface TVUserSelectionScreenProps {
-  server: SavedServer;
-  onUserSelect: (account: SavedServerAccount) => void;
-  onAddUser: () => void;
-  onChangeServer: () => void;
-  disabled?: boolean;
-}
-
-// TV event handler with fallback for non-TV platforms
-let useTVEventHandler: (callback: (evt: any) => void) => void;
-if (Platform.isTV) {
-  try {
-    useTVEventHandler = require("react-native").useTVEventHandler;
-  } catch {
-    useTVEventHandler = () => {};
-  }
-} else {
-  useTVEventHandler = () => {};
-}
-
-export const TVUserSelectionScreen: React.FC<TVUserSelectionScreenProps> = ({
-  server,
-  onUserSelect,
-  onAddUser,
-  onChangeServer,
-  disabled = false,
-}) => {
-  const typography = useScaledTVTypography();
-
-  const accounts = server.accounts || [];
-  const hasAccounts = accounts.length > 0;
-
-  // Handle TV remote back/menu button
-  useTVEventHandler((evt) => {
-    if (!evt || disabled) return;
-    if (evt.eventType === "menu" || evt.eventType === "back") {
-      onChangeServer();
-    }
-  });
-
-  // Handle Android TV back button
-  useEffect(() => {
-    if (!Platform.isTV) return;
-
-    const handleBackPress = () => {
-      if (disabled) return false;
-      onChangeServer();
-      return true;
-    };
-
-    const subscription = BackHandler.addEventListener(
-      "hardwareBackPress",
-      handleBackPress,
-    );
-
-    return () => subscription.remove();
-  }, [onChangeServer, disabled]);
-
-  return (
-    <ScrollView
-      style={{ flex: 1 }}
-      contentContainerStyle={{
-        flexGrow: 1,
-        justifyContent: "center",
-        alignItems: "center",
-        paddingVertical: 60,
-      }}
-      showsVerticalScrollIndicator={false}
-    >
-      <View
-        style={{
-          width: "100%",
-          alignItems: "center",
-          paddingHorizontal: 60,
-        }}
-      >
-        {/* Server Info Header */}
-        <View style={{ marginBottom: 48, alignItems: "center" }}>
-          <Text
-            style={{
-              fontSize: typography.title,
-              fontWeight: "bold",
-              color: "#FFFFFF",
-              textAlign: "center",
-              marginBottom: 8,
-            }}
-          >
-            {server.name || server.address}
-          </Text>
-          {server.name && (
-            <Text
-              style={{
-                fontSize: typography.body,
-                color: "#9CA3AF",
-                textAlign: "center",
-              }}
-            >
-              {server.address.replace(/^https?:\/\//, "")}
-            </Text>
-          )}
-          <Text
-            style={{
-              fontSize: typography.body,
-              color: "#6B7280",
-              textAlign: "center",
-              marginTop: 16,
-            }}
-          >
-            {hasAccounts
-              ? t("login.select_user")
-              : t("login.add_user_to_login")}
-          </Text>
-        </View>
-
-        {/* User Icons Grid with Back and Add buttons */}
-        <ScrollView
-          horizontal
-          showsHorizontalScrollIndicator={false}
-          contentContainerStyle={{
-            paddingHorizontal: 20,
-            gap: 24,
-          }}
-          style={{ overflow: "visible" }}
-        >
-          {/* Back/Change Server Button (left) */}
-          <TVBackIcon
-            label={t("server.change_server")}
-            onPress={onChangeServer}
-            disabled={disabled}
-          />
-
-          {/* User Icons */}
-          {accounts.map((account, index) => (
-            <TVUserIcon
-              key={account.userId}
-              username={account.username}
-              securityType={account.securityType}
-              onPress={() => onUserSelect(account)}
-              hasTVPreferredFocus={index === 0}
-              disabled={disabled}
-              serverAddress={server.address}
-              userId={account.userId}
-              primaryImageTag={account.primaryImageTag}
-            />
-          ))}
-
-          {/* Add User Button (right) */}
-          <TVAddIcon
-            label={t("login.add_user")}
-            onPress={onAddUser}
-            hasTVPreferredFocus={!hasAccounts}
-            disabled={disabled}
-          />
-        </ScrollView>
-      </View>
-    </ScrollView>
-  );
-};
--- a/components/persons/TVActorPage.tsx
+++ b/components/persons/TVActorPage.tsx
@@ -19,19 +19,19 @@ import {
  Dimensions,
  Easing,
  FlatList,
+  Pressable,
  ScrollView,
  View,
 } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Text } from "@/components/common/Text";
 import { getItemNavigation } from "@/components/common/TouchableItemRouter";
+import { ItemCardText } from "@/components/ItemCardText";
 import { Loader } from "@/components/Loader";
-import { TVPosterCard } from "@/components/tv/TVPosterCard";
-import { useScaledTVPosterSizes } from "@/constants/TVPosterSizes";
-import { useScaledTVSizes } from "@/constants/TVSizes";
-import { useScaledTVTypography } from "@/constants/TVTypography";
+import MoviePoster, {
+  TV_POSTER_WIDTH,
+} from "@/components/posters/MoviePoster.tv";
 import useRouter from "@/hooks/useAppRouter";
-import { useTVItemActionModal } from "@/hooks/useTVItemActionModal";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { getBackdropUrl } from "@/utils/jellyfin/image/getBackdropUrl";
 import { getUserItemData } from "@/utils/jellyfin/user-library/getUserItemData";
@@ -41,8 +41,58 @@ const { width: SCREEN_WIDTH } = Dimensions.get("window");
 const HORIZONTAL_PADDING = 80;
 const TOP_PADDING = 140;
 const ACTOR_IMAGE_SIZE = 250;
+const ITEM_GAP = 16;
 const SCALE_PADDING = 20;

+// Focusable poster wrapper component for TV
+const TVFocusablePoster: React.FC<{
+  children: React.ReactNode;
+  onPress: () => void;
+  hasTVPreferredFocus?: boolean;
+  onFocus?: () => void;
+  onBlur?: () => void;
+}> = ({ children, onPress, hasTVPreferredFocus, onFocus, onBlur }) => {
+  const [focused, setFocused] = useState(false);
+  const scale = useRef(new Animated.Value(1)).current;
+
+  const animateTo = (value: number) =>
+    Animated.timing(scale, {
+      toValue: value,
+      duration: 150,
+      easing: Easing.out(Easing.quad),
+      useNativeDriver: true,
+    }).start();
+
+  return (
+    <Pressable
+      onPress={onPress}
+      onFocus={() => {
+        setFocused(true);
+        animateTo(1.05);
+        onFocus?.();
+      }}
+      onBlur={() => {
+        setFocused(false);
+        animateTo(1);
+        onBlur?.();
+      }}
+      hasTVPreferredFocus={hasTVPreferredFocus}
+    >
+      <Animated.View
+        style={{
+          transform: [{ scale }],
+          shadowColor: "#ffffff",
+          shadowOffset: { width: 0, height: 0 },
+          shadowOpacity: focused ? 0.6 : 0,
+          shadowRadius: focused ? 20 : 0,
+        }}
+      >
+        {children}
+      </Animated.View>
+    </Pressable>
+  );
+};
+
 interface TVActorPageProps {
  personId: string;
 }
@@ -51,13 +101,8 @@ export const TVActorPage: React.FC<TVActorPageProps> = ({ personId }) => {
  const { t } = useTranslation();
  const insets = useSafeAreaInsets();
  const router = useRouter();
-  const { showItemActions } = useTVItemActionModal();
  const segments = useSegments();
  const from = (segments as string[])[2] || "(home)";
-  const posterSizes = useScaledTVPosterSizes();
-  const typography = useScaledTVTypography();
-  const sizes = useScaledTVSizes();
-  const ITEM_GAP = sizes.gaps.item;

  const [api] = useAtom(apiAtom);
  const [user] = useAtom(userAtom);
@@ -231,47 +276,35 @@ export const TVActorPage: React.FC<TVActorPageProps> = ({ personId }) => {
  // List item layout
  const getItemLayout = useCallback(
    (_data: ArrayLike<BaseItemDto> | null | undefined, index: number) => ({
-      length: posterSizes.poster + ITEM_GAP,
-      offset: (posterSizes.poster + ITEM_GAP) * index,
+      length: TV_POSTER_WIDTH + ITEM_GAP,
+      offset: (TV_POSTER_WIDTH + ITEM_GAP) * index,
      index,
    }),
    [],
  );

-  // Render movie filmography item
-  const renderMovieItem = useCallback(
-    ({ item: filmItem, index }: { item: BaseItemDto; index: number }) => (
+  // Render filmography item
+  const renderFilmographyItem = useCallback(
+    (
+      { item: filmItem, index }: { item: BaseItemDto; index: number },
+      isFirstSection: boolean,
+    ) => (
      <View style={{ marginRight: ITEM_GAP }}>
-        <TVPosterCard
-          item={filmItem}
-          orientation='vertical'
+        <TVFocusablePoster
          onPress={() => handleItemPress(filmItem)}
-          onLongPress={() => showItemActions(filmItem)}
          onFocus={() => setFocusedItem(filmItem)}
-          hasTVPreferredFocus={index === 0}
-          width={posterSizes.poster}
-        />
+          hasTVPreferredFocus={isFirstSection && index === 0}
+        >
+          <View>
+            <MoviePoster item={filmItem} />
+            <View style={{ width: TV_POSTER_WIDTH, marginTop: 8 }}>
+              <ItemCardText item={filmItem} />
+            </View>
+          </View>
+        </TVFocusablePoster>
      </View>
    ),
-    [handleItemPress, showItemActions, posterSizes.poster],
-  );
-
-  // Render series filmography item
-  const renderSeriesItem = useCallback(
-    ({ item: filmItem, index }: { item: BaseItemDto; index: number }) => (
-      <View style={{ marginRight: ITEM_GAP }}>
-        <TVPosterCard
-          item={filmItem}
-          orientation='vertical'
-          onPress={() => handleItemPress(filmItem)}
-          onLongPress={() => showItemActions(filmItem)}
-          onFocus={() => setFocusedItem(filmItem)}
-          hasTVPreferredFocus={movies.length === 0 && index === 0}
-          width={posterSizes.poster}
-        />
-      </View>
-    ),
-    [handleItemPress, showItemActions, posterSizes.poster, movies.length],
+    [handleItemPress],
  );

  if (isLoadingActor) {
@@ -341,16 +374,28 @@ export const TVActorPage: React.FC<TVActorPageProps> = ({ personId }) => {
            <View style={{ flex: 1, backgroundColor: "#1a1a1a" }} />
          )}
        </Animated.View>
-        {/* Gradient overlay for readability */}
+        {/* Gradient overlays for readability */}
        <LinearGradient
-          colors={["rgba(0,0,0,0.3)", "rgba(0,0,0,0.7)", "rgba(0,0,0,0.95)"]}
-          locations={[0, 0.4, 1]}
+          colors={["transparent", "rgba(0,0,0,0.7)", "rgba(0,0,0,0.95)"]}
+          locations={[0, 0.5, 1]}
          style={{
            position: "absolute",
            left: 0,
            right: 0,
            bottom: 0,
-            height: "100%",
+            height: "70%",
+          }}
+        />
+        <LinearGradient
+          colors={["rgba(0,0,0,0.8)", "transparent"]}
+          start={{ x: 0, y: 0 }}
+          end={{ x: 0.6, y: 0 }}
+          style={{
+            position: "absolute",
+            left: 0,
+            top: 0,
+            bottom: 0,
+            width: "60%",
          }}
        />
      </View>
@@ -414,7 +459,7 @@ export const TVActorPage: React.FC<TVActorPageProps> = ({ personId }) => {
            {/* Actor name */}
            <Text
              style={{
-                fontSize: typography.title,
+                fontSize: 42,
                fontWeight: "bold",
                color: "#FFFFFF",
                marginBottom: 8,
@@ -428,7 +473,7 @@ export const TVActorPage: React.FC<TVActorPageProps> = ({ personId }) => {
            {item.ProductionYear && (
              <Text
                style={{
-                  fontSize: typography.callout,
+                  fontSize: 18,
                  color: "#9CA3AF",
                  marginBottom: 16,
                }}
@@ -441,9 +486,9 @@ export const TVActorPage: React.FC<TVActorPageProps> = ({ personId }) => {
            {item.Overview && (
              <Text
                style={{
-                  fontSize: typography.body,
+                  fontSize: 18,
                  color: "#D1D5DB",
-                  lineHeight: typography.body * 1.4,
+                  lineHeight: 28,
                  maxWidth: SCREEN_WIDTH * 0.45,
                }}
                numberOfLines={4}
@@ -472,7 +517,7 @@ export const TVActorPage: React.FC<TVActorPageProps> = ({ personId }) => {
              <View style={{ marginBottom: 32 }}>
                <Text
                  style={{
-                    fontSize: typography.heading,
+                    fontSize: 22,
                    fontWeight: "600",
                    color: "#FFFFFF",
                    marginBottom: 16,
@@ -485,7 +530,7 @@ export const TVActorPage: React.FC<TVActorPageProps> = ({ personId }) => {
                  horizontal
                  data={movies}
                  keyExtractor={(filmItem) => filmItem.Id!}
-                  renderItem={renderMovieItem}
+                  renderItem={(props) => renderFilmographyItem(props, true)}
                  showsHorizontalScrollIndicator={false}
                  initialNumToRender={6}
                  maxToRenderPerBatch={4}
@@ -518,7 +563,7 @@ export const TVActorPage: React.FC<TVActorPageProps> = ({ personId }) => {
              <View>
                <Text
                  style={{
-                    fontSize: typography.heading,
+                    fontSize: 22,
                    fontWeight: "600",
                    color: "#FFFFFF",
                    marginBottom: 16,
@@ -531,7 +576,9 @@ export const TVActorPage: React.FC<TVActorPageProps> = ({ personId }) => {
                  horizontal
                  data={series}
                  keyExtractor={(filmItem) => filmItem.Id!}
-                  renderItem={renderSeriesItem}
+                  renderItem={(props) =>
+                    renderFilmographyItem(props, movies.length === 0)
+                  }
                  showsHorizontalScrollIndicator={false}
                  initialNumToRender={6}
                  maxToRenderPerBatch={4}
@@ -556,7 +603,7 @@ export const TVActorPage: React.FC<TVActorPageProps> = ({ personId }) => {
              <Text
                style={{
                  color: "#737373",
-                  fontSize: typography.callout,
+                  fontSize: 16,
                  marginLeft: SCALE_PADDING,
                }}
              >
--- a/components/posters/MoviePoster.tv.tsx
+++ b/components/posters/MoviePoster.tv.tsx
@@ -0,0 +1,106 @@
+import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import { Image } from "expo-image";
+import { useAtom } from "jotai";
+import { useMemo } from "react";
+import { View } from "react-native";
+import { WatchedIndicator } from "@/components/WatchedIndicator";
+import {
+  GlassPosterView,
+  isGlassEffectAvailable,
+} from "@/modules/glass-poster";
+import { apiAtom } from "@/providers/JellyfinProvider";
+import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
+
+export const TV_POSTER_WIDTH = 260;
+
+type MoviePosterProps = {
+  item: BaseItemDto;
+  showProgress?: boolean;
+};
+
+const MoviePoster: React.FC<MoviePosterProps> = ({
+  item,
+  showProgress = false,
+}) => {
+  const [api] = useAtom(apiAtom);
+
+  const url = useMemo(() => {
+    return getPrimaryImageUrl({
+      api,
+      item,
+      width: 520, // 2x for quality on large screens
+    });
+  }, [api, item]);
+
+  const progress = item.UserData?.PlayedPercentage || 0;
+  const isWatched = item.UserData?.Played === true;
+
+  const blurhash = useMemo(() => {
+    const key = item.ImageTags?.Primary as string;
+    return item.ImageBlurHashes?.Primary?.[key];
+  }, [item]);
+
+  // Use glass effect on tvOS 26+
+  const useGlass = isGlassEffectAvailable();
+
+  if (useGlass) {
+    return (
+      <GlassPosterView
+        imageUrl={url ?? null}
+        aspectRatio={10 / 15}
+        cornerRadius={24}
+        progress={showProgress ? progress : 0}
+        showWatchedIndicator={isWatched}
+        isFocused={false}
+        width={TV_POSTER_WIDTH}
+        style={{ width: TV_POSTER_WIDTH }}
+      />
+    );
+  }
+
+  // Fallback for older tvOS versions
+  return (
+    <View
+      style={{
+        position: "relative",
+        borderRadius: 24,
+        overflow: "hidden",
+        width: TV_POSTER_WIDTH,
+        aspectRatio: 10 / 15,
+      }}
+    >
+      <Image
+        placeholder={{
+          blurhash,
+        }}
+        key={item.Id}
+        id={item.Id}
+        source={
+          url
+            ? {
+                uri: url,
+              }
+            : null
+        }
+        cachePolicy={"memory-disk"}
+        contentFit='cover'
+        style={{
+          aspectRatio: 10 / 15,
+          width: "100%",
+        }}
+      />
+      <WatchedIndicator item={item} />
+      {showProgress && progress > 0 && (
+        <View
+          style={{
+            height: 4,
+            backgroundColor: "#dc2626",
+            width: "100%",
+          }}
+        />
+      )}
+    </View>
+  );
+};
+
+export default MoviePoster;
--- a/components/posters/SeriesPoster.tv.tsx
+++ b/components/posters/SeriesPoster.tv.tsx
@@ -0,0 +1,92 @@
+import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import { Image } from "expo-image";
+import { useAtom } from "jotai";
+import { useMemo } from "react";
+import { View } from "react-native";
+import {
+  GlassPosterView,
+  isGlassEffectAvailable,
+} from "@/modules/glass-poster";
+import { apiAtom } from "@/providers/JellyfinProvider";
+import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
+
+export const TV_POSTER_WIDTH = 260;
+
+type SeriesPosterProps = {
+  item: BaseItemDto;
+  showProgress?: boolean;
+};
+
+const SeriesPoster: React.FC<SeriesPosterProps> = ({ item }) => {
+  const [api] = useAtom(apiAtom);
+
+  const url = useMemo(() => {
+    if (item.Type === "Episode") {
+      return `${api?.basePath}/Items/${item.SeriesId}/Images/Primary?fillHeight=780&quality=80&tag=${item.SeriesPrimaryImageTag}`;
+    }
+    return getPrimaryImageUrl({
+      api,
+      item,
+      width: 520, // 2x for quality on large screens
+    });
+  }, [api, item]);
+
+  const blurhash = useMemo(() => {
+    const key = item.ImageTags?.Primary as string;
+    return item.ImageBlurHashes?.Primary?.[key];
+  }, [item]);
+
+  // Use glass effect on tvOS 26+
+  const useGlass = isGlassEffectAvailable();
+
+  if (useGlass) {
+    return (
+      <GlassPosterView
+        imageUrl={url ?? null}
+        aspectRatio={10 / 15}
+        cornerRadius={24}
+        progress={0}
+        showWatchedIndicator={false}
+        isFocused={false}
+        width={TV_POSTER_WIDTH}
+        style={{ width: TV_POSTER_WIDTH }}
+      />
+    );
+  }
+
+  // Fallback for older tvOS versions
+  return (
+    <View
+      style={{
+        width: TV_POSTER_WIDTH,
+        aspectRatio: 10 / 15,
+        position: "relative",
+        borderRadius: 24,
+        overflow: "hidden",
+      }}
+    >
+      <Image
+        placeholder={{
+          blurhash,
+        }}
+        key={item.Id}
+        id={item.Id}
+        source={
+          url
+            ? {
+                uri: url,
+              }
+            : null
+        }
+        cachePolicy={"memory-disk"}
+        contentFit='cover'
+        style={{
+          height: "100%",
+          width: "100%",
+        }}
+      />
+    </View>
+  );
+};
+
+export default SeriesPoster;
--- a/components/search/TVJellyseerrSearchResults.tsx
+++ b/components/search/TVJellyseerrSearchResults.tsx
@@ -151,7 +151,7 @@ const TVJellyseerrPersonPoster: React.FC<TVJellyseerrPersonPosterProps> = ({
  const typography = useScaledTVTypography();
  const { jellyseerrApi } = useJellyseerr();
  const { focused, handleFocus, handleBlur, animatedStyle } =
-    useTVFocusAnimation();
+    useTVFocusAnimation({ scaleAmount: 1.08 });

  const posterUrl = item.profilePath
    ? jellyseerrApi?.imageProxy(item.profilePath, "w185")
--- a/components/search/TVSearchBadge.tsx
+++ b/components/search/TVSearchBadge.tsx
@@ -17,7 +17,7 @@ export const TVSearchBadge: React.FC<TVSearchBadgeProps> = ({
 }) => {
  const typography = useScaledTVTypography();
  const { focused, handleFocus, handleBlur, animatedStyle } =
-    useTVFocusAnimation({ duration: 150 });
+    useTVFocusAnimation({ scaleAmount: 1.08, duration: 150 });

  return (
    <Pressable
--- a/components/search/TVSearchPage.tsx
+++ b/components/search/TVSearchPage.tsx
@@ -106,7 +106,6 @@ interface TVSearchPageProps {
  loading: boolean;
  noResults: boolean;
  onItemPress: (item: BaseItemDto) => void;
-  onItemLongPress?: (item: BaseItemDto) => void;
  // Jellyseerr/Discover props
  searchType: SearchType;
  setSearchType: (type: SearchType) => void;
@@ -139,7 +138,6 @@ export const TVSearchPage: React.FC<TVSearchPageProps> = ({
  loading,
  noResults,
  onItemPress,
-  onItemLongPress,
  searchType,
  setSearchType,
  showDiscover,
@@ -222,15 +220,12 @@ export const TVSearchPage: React.FC<TVSearchPageProps> = ({
      contentContainerStyle={{
        paddingTop: insets.top + TOP_PADDING,
        paddingBottom: insets.bottom + 60,
+        paddingLeft: insets.left + HORIZONTAL_PADDING,
+        paddingRight: insets.right + HORIZONTAL_PADDING,
      }}
    >
      {/* Search Input */}
-      <View
-        style={{
-          marginBottom: 24,
-          marginHorizontal: HORIZONTAL_PADDING + 200,
-        }}
-      >
+      <View style={{ marginBottom: 24, marginHorizontal: SCALE_PADDING + 200 }}>
        <Input
          placeholder={t("search.search")}
          value={search}
@@ -250,7 +245,7 @@ export const TVSearchPage: React.FC<TVSearchPageProps> = ({

      {/* Search Type Tab Badges */}
      {showDiscover && (
-        <View style={{ marginHorizontal: HORIZONTAL_PADDING }}>
+        <View style={{ marginHorizontal: SCALE_PADDING }}>
          <TVSearchTabBadges
            searchType={searchType}
            setSearchType={setSearchType}
@@ -278,7 +273,6 @@ export const TVSearchPage: React.FC<TVSearchPageProps> = ({
              orientation={section.orientation || "vertical"}
              isFirstSection={index === 0}
              onItemPress={onItemPress}
-              onItemLongPress={onItemLongPress}
              imageUrlGetter={
                ["artists", "albums", "songs", "playlists"].includes(
                  section.key,
--- a/components/search/TVSearchSection.tsx
+++ b/components/search/TVSearchSection.tsx
@@ -2,15 +2,143 @@ import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import { Image } from "expo-image";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { FlatList, View, type ViewProps } from "react-native";
+import ContinueWatchingPoster, {
+  TV_LANDSCAPE_WIDTH,
+} from "@/components/ContinueWatchingPoster.tv";
 import { Text } from "@/components/common/Text";
+import MoviePoster, {
+  TV_POSTER_WIDTH,
+} from "@/components/posters/MoviePoster.tv";
+import SeriesPoster from "@/components/posters/SeriesPoster.tv";
 import { TVFocusablePoster } from "@/components/tv/TVFocusablePoster";
-import { TVPosterCard } from "@/components/tv/TVPosterCard";
-import { useScaledTVPosterSizes } from "@/constants/TVPosterSizes";
-import { useScaledTVSizes } from "@/constants/TVSizes";
 import { useScaledTVTypography } from "@/constants/TVTypography";

+const ITEM_GAP = 16;
 const SCALE_PADDING = 20;

+// TV-specific ItemCardText with larger fonts
+const TVItemCardText: React.FC<{ item: BaseItemDto }> = ({ item }) => {
+  const typography = useScaledTVTypography();
+  return (
+    <View style={{ marginTop: 12, flexDirection: "column" }}>
+      {item.Type === "Episode" ? (
+        <>
+          <Text
+            numberOfLines={1}
+            style={{ fontSize: typography.callout, color: "#FFFFFF" }}
+          >
+            {item.Name}
+          </Text>
+          <Text
+            numberOfLines={1}
+            style={{
+              fontSize: typography.callout,
+              color: "#9CA3AF",
+              marginTop: 2,
+            }}
+          >
+            {`S${item.ParentIndexNumber?.toString()}:E${item.IndexNumber?.toString()}`}
+            {" - "}
+            {item.SeriesName}
+          </Text>
+        </>
+      ) : item.Type === "MusicArtist" ? (
+        <Text
+          numberOfLines={2}
+          style={{
+            fontSize: typography.callout,
+            color: "#FFFFFF",
+            textAlign: "center",
+          }}
+        >
+          {item.Name}
+        </Text>
+      ) : item.Type === "MusicAlbum" ? (
+        <>
+          <Text
+            numberOfLines={2}
+            style={{ fontSize: typography.callout, color: "#FFFFFF" }}
+          >
+            {item.Name}
+          </Text>
+          <Text
+            numberOfLines={1}
+            style={{
+              fontSize: typography.callout,
+              color: "#9CA3AF",
+              marginTop: 2,
+            }}
+          >
+            {item.AlbumArtist || item.Artists?.join(", ")}
+          </Text>
+        </>
+      ) : item.Type === "Audio" ? (
+        <>
+          <Text
+            numberOfLines={2}
+            style={{ fontSize: typography.callout, color: "#FFFFFF" }}
+          >
+            {item.Name}
+          </Text>
+          <Text
+            numberOfLines={1}
+            style={{
+              fontSize: typography.callout,
+              color: "#9CA3AF",
+              marginTop: 2,
+            }}
+          >
+            {item.Artists?.join(", ") || item.AlbumArtist}
+          </Text>
+        </>
+      ) : item.Type === "Playlist" ? (
+        <>
+          <Text
+            numberOfLines={2}
+            style={{ fontSize: typography.callout, color: "#FFFFFF" }}
+          >
+            {item.Name}
+          </Text>
+          <Text
+            style={{
+              fontSize: typography.callout,
+              color: "#9CA3AF",
+              marginTop: 2,
+            }}
+          >
+            {item.ChildCount} tracks
+          </Text>
+        </>
+      ) : item.Type === "Person" ? (
+        <Text
+          numberOfLines={2}
+          style={{ fontSize: typography.callout, color: "#FFFFFF" }}
+        >
+          {item.Name}
+        </Text>
+      ) : (
+        <>
+          <Text
+            numberOfLines={1}
+            style={{ fontSize: typography.callout, color: "#FFFFFF" }}
+          >
+            {item.Name}
+          </Text>
+          <Text
+            style={{
+              fontSize: typography.callout,
+              color: "#9CA3AF",
+              marginTop: 2,
+            }}
+          >
+            {item.ProductionYear}
+          </Text>
+        </>
+      )}
+    </View>
+  );
+};
+
 interface TVSearchSectionProps extends ViewProps {
  title: string;
  items: BaseItemDto[];
@@ -18,7 +146,6 @@ interface TVSearchSectionProps extends ViewProps {
  disabled?: boolean;
  isFirstSection?: boolean;
  onItemPress: (item: BaseItemDto) => void;
-  onItemLongPress?: (item: BaseItemDto) => void;
  imageUrlGetter?: (item: BaseItemDto) => string | undefined;
 }

@@ -29,20 +156,19 @@ export const TVSearchSection: React.FC<TVSearchSectionProps> = ({
  disabled = false,
  isFirstSection = false,
  onItemPress,
-  onItemLongPress,
  imageUrlGetter,
  ...props
 }) => {
  const typography = useScaledTVTypography();
-  const posterSizes = useScaledTVPosterSizes();
-  const sizes = useScaledTVSizes();
-  const ITEM_GAP = sizes.gaps.item;
  const flatListRef = useRef<FlatList<BaseItemDto>>(null);
  const [focusedCount, setFocusedCount] = useState(0);
  const prevFocusedCount = useRef(0);

-  // Track focus count for section
+  // When section loses all focus, scroll back to start
  useEffect(() => {
+    if (prevFocusedCount.current > 0 && focusedCount === 0) {
+      flatListRef.current?.scrollToOffset({ offset: 0, animated: true });
+    }
    prevFocusedCount.current = focusedCount;
  }, [focusedCount]);

@@ -55,7 +181,7 @@ export const TVSearchSection: React.FC<TVSearchSectionProps> = ({
  }, []);

  const itemWidth =
-    orientation === "horizontal" ? posterSizes.landscape : posterSizes.poster;
+    orientation === "horizontal" ? TV_LANDSCAPE_WIDTH : TV_POSTER_WIDTH;

  const getItemLayout = useCallback(
    (_data: ArrayLike<BaseItemDto> | null | undefined, index: number) => ({
@@ -63,186 +189,155 @@ export const TVSearchSection: React.FC<TVSearchSectionProps> = ({
      offset: (itemWidth + ITEM_GAP) * index,
      index,
    }),
-    [itemWidth, ITEM_GAP],
+    [itemWidth],
  );

  const renderItem = useCallback(
    ({ item, index }: { item: BaseItemDto; index: number }) => {
      const isFirstItem = isFirstSection && index === 0;
+      const isHorizontal = orientation === "horizontal";

-      // Special handling for MusicArtist (circular avatar)
-      if (item.Type === "MusicArtist") {
-        const imageUrl = imageUrlGetter?.(item);
-        return (
-          <View style={{ marginRight: ITEM_GAP, width: 160 }}>
-            <TVFocusablePoster
-              onPress={() => onItemPress(item)}
-              onLongPress={
-                onItemLongPress ? () => onItemLongPress(item) : undefined
-              }
-              hasTVPreferredFocus={isFirstItem && !disabled}
-              onFocus={handleItemFocus}
-              onBlur={handleItemBlur}
-              disabled={disabled}
+      const renderPoster = () => {
+        // Music Artist - circular avatar
+        if (item.Type === "MusicArtist") {
+          const imageUrl = imageUrlGetter?.(item);
+          return (
+            <View
+              style={{
+                width: 160,
+                height: 160,
+                borderRadius: 80,
+                overflow: "hidden",
+                backgroundColor: "#1a1a1a",
+              }}
            >
-              <View
-                style={{
-                  width: 160,
-                  height: 160,
-                  borderRadius: 80,
-                  overflow: "hidden",
-                  backgroundColor: "#1a1a1a",
-                }}
-              >
-                {imageUrl ? (
-                  <Image
-                    source={{ uri: imageUrl }}
-                    style={{ width: "100%", height: "100%" }}
-                    contentFit='cover'
-                  />
-                ) : (
-                  <View
-                    style={{
-                      flex: 1,
-                      alignItems: "center",
-                      justifyContent: "center",
-                      backgroundColor: "#262626",
-                    }}
-                  >
-                    <Text style={{ fontSize: 48 }}>👤</Text>
-                  </View>
-                )}
-              </View>
-            </TVFocusablePoster>
-            <View style={{ marginTop: 12, flexDirection: "column" }}>
-              <Text
-                numberOfLines={2}
-                style={{
-                  fontSize: typography.callout,
-                  color: "#FFFFFF",
-                  textAlign: "center",
-                }}
-              >
-                {item.Name}
-              </Text>
-            </View>
-          </View>
-        );
-      }
-
-      // Special handling for MusicAlbum, Audio, Playlist (square images)
-      if (
-        item.Type === "MusicAlbum" ||
-        item.Type === "Audio" ||
-        item.Type === "Playlist"
-      ) {
-        const imageUrl = imageUrlGetter?.(item);
-        const icon =
-          item.Type === "Playlist" ? "🎶" : item.Type === "Audio" ? "🎵" : "🎵";
-        return (
-          <View style={{ marginRight: ITEM_GAP, width: posterSizes.poster }}>
-            <TVFocusablePoster
-              onPress={() => onItemPress(item)}
-              onLongPress={
-                onItemLongPress ? () => onItemLongPress(item) : undefined
-              }
-              hasTVPreferredFocus={isFirstItem && !disabled}
-              onFocus={handleItemFocus}
-              onBlur={handleItemBlur}
-              disabled={disabled}
-            >
-              <View
-                style={{
-                  width: posterSizes.poster,
-                  height: posterSizes.poster,
-                  borderRadius: 12,
-                  overflow: "hidden",
-                  backgroundColor: "#1a1a1a",
-                }}
-              >
-                {imageUrl ? (
-                  <Image
-                    source={{ uri: imageUrl }}
-                    style={{ width: "100%", height: "100%" }}
-                    contentFit='cover'
-                  />
-                ) : (
-                  <View
-                    style={{
-                      flex: 1,
-                      alignItems: "center",
-                      justifyContent: "center",
-                      backgroundColor: "#262626",
-                    }}
-                  >
-                    <Text style={{ fontSize: 64 }}>{icon}</Text>
-                  </View>
-                )}
-              </View>
-            </TVFocusablePoster>
-            <View style={{ marginTop: 12, flexDirection: "column" }}>
-              <Text
-                numberOfLines={2}
-                style={{ fontSize: typography.callout, color: "#FFFFFF" }}
-              >
-                {item.Name}
-              </Text>
-              {item.Type === "MusicAlbum" && (
-                <Text
-                  numberOfLines={1}
+              {imageUrl ? (
+                <Image
+                  source={{ uri: imageUrl }}
+                  style={{ width: "100%", height: "100%" }}
+                  contentFit='cover'
+                />
+              ) : (
+                <View
                  style={{
-                    fontSize: typography.callout,
-                    color: "#9CA3AF",
-                    marginTop: 2,
+                    flex: 1,
+                    alignItems: "center",
+                    justifyContent: "center",
+                    backgroundColor: "#262626",
                  }}
                >
-                  {item.AlbumArtist || item.Artists?.join(", ")}
-                </Text>
-              )}
-              {item.Type === "Audio" && (
-                <Text
-                  numberOfLines={1}
-                  style={{
-                    fontSize: typography.callout,
-                    color: "#9CA3AF",
-                    marginTop: 2,
-                  }}
-                >
-                  {item.Artists?.join(", ") || item.AlbumArtist}
-                </Text>
-              )}
-              {item.Type === "Playlist" && (
-                <Text
-                  style={{
-                    fontSize: typography.callout,
-                    color: "#9CA3AF",
-                    marginTop: 2,
-                  }}
-                >
-                  {item.ChildCount} tracks
-                </Text>
+                  <Text style={{ fontSize: 48 }}>👤</Text>
+                </View>
              )}
            </View>
-          </View>
-        );
-      }
+          );
+        }
+
+        // Music Album, Audio, Playlist - square images
+        if (
+          item.Type === "MusicAlbum" ||
+          item.Type === "Audio" ||
+          item.Type === "Playlist"
+        ) {
+          const imageUrl = imageUrlGetter?.(item);
+          const icon =
+            item.Type === "Playlist"
+              ? "🎶"
+              : item.Type === "Audio"
+                ? "🎵"
+                : "🎵";
+          return (
+            <View
+              style={{
+                width: TV_POSTER_WIDTH,
+                height: TV_POSTER_WIDTH,
+                borderRadius: 12,
+                overflow: "hidden",
+                backgroundColor: "#1a1a1a",
+              }}
+            >
+              {imageUrl ? (
+                <Image
+                  source={{ uri: imageUrl }}
+                  style={{ width: "100%", height: "100%" }}
+                  contentFit='cover'
+                />
+              ) : (
+                <View
+                  style={{
+                    flex: 1,
+                    alignItems: "center",
+                    justifyContent: "center",
+                    backgroundColor: "#262626",
+                  }}
+                >
+                  <Text style={{ fontSize: 64 }}>{icon}</Text>
+                </View>
+              )}
+            </View>
+          );
+        }
+
+        // Person (Actor)
+        if (item.Type === "Person") {
+          return <MoviePoster item={item} />;
+        }
+
+        // Episode rendering
+        if (item.Type === "Episode" && isHorizontal) {
+          return <ContinueWatchingPoster item={item} />;
+        }
+        if (item.Type === "Episode" && !isHorizontal) {
+          return <SeriesPoster item={item} />;
+        }
+
+        // Movie rendering
+        if (item.Type === "Movie" && isHorizontal) {
+          return <ContinueWatchingPoster item={item} />;
+        }
+        if (item.Type === "Movie" && !isHorizontal) {
+          return <MoviePoster item={item} />;
+        }
+
+        // Series rendering
+        if (item.Type === "Series" && !isHorizontal) {
+          return <SeriesPoster item={item} />;
+        }
+        if (item.Type === "Series" && isHorizontal) {
+          return <ContinueWatchingPoster item={item} />;
+        }
+
+        // BoxSet (Collection)
+        if (item.Type === "BoxSet" && !isHorizontal) {
+          return <MoviePoster item={item} />;
+        }
+        if (item.Type === "BoxSet" && isHorizontal) {
+          return <ContinueWatchingPoster item={item} />;
+        }
+
+        // Default fallback
+        return isHorizontal ? (
+          <ContinueWatchingPoster item={item} />
+        ) : (
+          <MoviePoster item={item} />
+        );
+      };
+
+      // Special width for music artists (circular)
+      const actualItemWidth = item.Type === "MusicArtist" ? 160 : itemWidth;

-      // Use TVPosterCard for all other item types
      return (
-        <View style={{ marginRight: ITEM_GAP }}>
-          <TVPosterCard
-            item={item}
-            orientation={orientation}
+        <View style={{ marginRight: ITEM_GAP, width: actualItemWidth }}>
+          <TVFocusablePoster
            onPress={() => onItemPress(item)}
-            onLongPress={
-              onItemLongPress ? () => onItemLongPress(item) : undefined
-            }
            hasTVPreferredFocus={isFirstItem && !disabled}
            onFocus={handleItemFocus}
            onBlur={handleItemBlur}
            disabled={disabled}
-            width={itemWidth}
-          />
+          >
+            {renderPoster()}
+          </TVFocusablePoster>
+          <TVItemCardText item={item} />
        </View>
      );
    },
@@ -251,14 +346,10 @@ export const TVSearchSection: React.FC<TVSearchSectionProps> = ({
      isFirstSection,
      itemWidth,
      onItemPress,
-      onItemLongPress,
      handleItemFocus,
      handleItemBlur,
      disabled,
      imageUrlGetter,
-      posterSizes.poster,
-      typography.callout,
-      ITEM_GAP,
    ],
  );

@@ -273,7 +364,7 @@ export const TVSearchSection: React.FC<TVSearchSectionProps> = ({
          fontWeight: "700",
          color: "#FFFFFF",
          marginBottom: 20,
-          marginLeft: sizes.padding.horizontal,
+          marginLeft: SCALE_PADDING,
          letterSpacing: 0.5,
        }}
      >
@@ -293,13 +384,9 @@ export const TVSearchSection: React.FC<TVSearchSectionProps> = ({
        removeClippedSubviews={false}
        getItemLayout={getItemLayout}
        style={{ overflow: "visible" }}
-        contentInset={{
-          left: sizes.padding.horizontal,
-          right: sizes.padding.horizontal,
-        }}
-        contentOffset={{ x: -sizes.padding.horizontal, y: 0 }}
        contentContainerStyle={{
          paddingVertical: SCALE_PADDING,
+          paddingHorizontal: SCALE_PADDING,
        }}
      />
    </View>
--- a/components/search/TVSearchTabBadges.tsx
+++ b/components/search/TVSearchTabBadges.tsx
@@ -23,7 +23,7 @@ const TVSearchTabBadge: React.FC<TVSearchTabBadgeProps> = ({
 }) => {
  const typography = useScaledTVTypography();
  const { focused, handleFocus, handleBlur, animatedStyle } =
-    useTVFocusAnimation({ duration: 150 });
+    useTVFocusAnimation({ scaleAmount: 1.08, duration: 150 });

  // Design language: white for focused/selected, transparent white for unfocused
  const getBackgroundColor = () => {
--- a/components/series/TVEpisodeCard.tsx
+++ b/components/series/TVEpisodeCard.tsx
@@ -0,0 +1,149 @@
+import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import { Image } from "expo-image";
+import { useAtomValue } from "jotai";
+import React, { useMemo } from "react";
+import { View } from "react-native";
+import { ProgressBar } from "@/components/common/ProgressBar";
+import { Text } from "@/components/common/Text";
+import { TVFocusablePoster } from "@/components/tv/TVFocusablePoster";
+import { WatchedIndicator } from "@/components/WatchedIndicator";
+import { useScaledTVTypography } from "@/constants/TVTypography";
+import { apiAtom } from "@/providers/JellyfinProvider";
+import { runtimeTicksToMinutes } from "@/utils/time";
+
+export const TV_EPISODE_WIDTH = 340;
+
+interface TVEpisodeCardProps {
+  episode: BaseItemDto;
+  hasTVPreferredFocus?: boolean;
+  disabled?: boolean;
+  onPress: () => void;
+  onFocus?: () => void;
+  onBlur?: () => void;
+  /** Setter function for the ref (for focus guide destinations) */
+  refSetter?: (ref: View | null) => void;
+}
+
+export const TVEpisodeCard: React.FC<TVEpisodeCardProps> = ({
+  episode,
+  hasTVPreferredFocus = false,
+  disabled = false,
+  onPress,
+  onFocus,
+  onBlur,
+  refSetter,
+}) => {
+  const typography = useScaledTVTypography();
+  const api = useAtomValue(apiAtom);
+
+  const thumbnailUrl = useMemo(() => {
+    if (!api) return null;
+
+    // Try to get episode primary image first
+    if (episode.ImageTags?.Primary) {
+      return `${api.basePath}/Items/${episode.Id}/Images/Primary?fillHeight=600&quality=80&tag=${episode.ImageTags.Primary}`;
+    }
+
+    // Fall back to series thumb or backdrop
+    if (episode.ParentBackdropItemId && episode.ParentThumbImageTag) {
+      return `${api.basePath}/Items/${episode.ParentBackdropItemId}/Images/Thumb?fillHeight=600&quality=80&tag=${episode.ParentThumbImageTag}`;
+    }
+
+    // Default episode image
+    return `${api.basePath}/Items/${episode.Id}/Images/Primary?fillHeight=600&quality=80`;
+  }, [api, episode]);
+
+  const duration = useMemo(() => {
+    if (!episode.RunTimeTicks) return null;
+    return runtimeTicksToMinutes(episode.RunTimeTicks);
+  }, [episode.RunTimeTicks]);
+
+  const episodeLabel = useMemo(() => {
+    const season = episode.ParentIndexNumber;
+    const ep = episode.IndexNumber;
+    if (season !== undefined && ep !== undefined) {
+      return `S${season}:E${ep}`;
+    }
+    return null;
+  }, [episode.ParentIndexNumber, episode.IndexNumber]);
+
+  return (
+    <View style={{ width: TV_EPISODE_WIDTH, opacity: disabled ? 0.5 : 1 }}>
+      <TVFocusablePoster
+        onPress={onPress}
+        hasTVPreferredFocus={hasTVPreferredFocus}
+        disabled={disabled}
+        onFocus={onFocus}
+        onBlur={onBlur}
+        refSetter={refSetter}
+      >
+        <View
+          style={{
+            width: TV_EPISODE_WIDTH,
+            aspectRatio: 16 / 9,
+            borderRadius: 24,
+            overflow: "hidden",
+            backgroundColor: "#1a1a1a",
+          }}
+        >
+          {thumbnailUrl ? (
+            <Image
+              source={{ uri: thumbnailUrl }}
+              style={{ width: "100%", height: "100%" }}
+              contentFit='cover'
+              cachePolicy='memory-disk'
+            />
+          ) : (
+            <View
+              style={{
+                width: "100%",
+                height: "100%",
+                backgroundColor: "#262626",
+              }}
+            />
+          )}
+          <WatchedIndicator item={episode} />
+          <ProgressBar item={episode} />
+        </View>
+      </TVFocusablePoster>
+
+      {/* Episode info below thumbnail */}
+      <View style={{ marginTop: 12, paddingHorizontal: 4 }}>
+        <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+          {episodeLabel && (
+            <Text
+              style={{
+                fontSize: typography.callout,
+                color: "#FFFFFF",
+                fontWeight: "500",
+              }}
+            >
+              {episodeLabel}
+            </Text>
+          )}
+          {duration && (
+            <>
+              <Text style={{ color: "#FFFFFF", fontSize: typography.callout }}>
+                •
+              </Text>
+              <Text style={{ fontSize: typography.callout, color: "#FFFFFF" }}>
+                {duration}
+              </Text>
+            </>
+          )}
+        </View>
+        <Text
+          numberOfLines={2}
+          style={{
+            fontSize: typography.callout,
+            color: "#FFFFFF",
+            marginTop: 4,
+            fontWeight: "500",
+          }}
+        >
+          {episode.Name}
+        </Text>
+      </View>
+    </View>
+  );
+};
--- a/components/series/TVEpisodeList.tsx
+++ b/components/series/TVEpisodeList.tsx
@@ -1,89 +0,0 @@
-import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import React, { useCallback } from "react";
-import { ScrollView, View } from "react-native";
-import { TVHorizontalList } from "@/components/tv/TVHorizontalList";
-import { TVPosterCard } from "@/components/tv/TVPosterCard";
-
-interface TVEpisodeListProps {
-  episodes: BaseItemDto[];
-  /** Shows "Now Playing" badge on the episode matching this ID */
-  currentEpisodeId?: string;
-  /** Disable all cards (e.g., when modal is open) */
-  disabled?: boolean;
-  /** Handler when an episode is pressed */
-  onEpisodePress: (episode: BaseItemDto) => void;
-  /** Called when any episode is long-pressed */
-  onEpisodeLongPress?: (episode: BaseItemDto) => void;
-  /** Called when any episode gains focus */
-  onFocus?: () => void;
-  /** Called when any episode loses focus */
-  onBlur?: () => void;
-  /** Ref for programmatic scrolling */
-  scrollViewRef?: React.RefObject<ScrollView | null>;
-  /** Setter for the first episode ref (for focus guide destinations) */
-  firstEpisodeRefSetter?: (ref: View | null) => void;
-  /** Text to show when episodes array is empty */
-  emptyText?: string;
-  /** Horizontal padding for the list content */
-  horizontalPadding?: number;
-}
-
-export const TVEpisodeList: React.FC<TVEpisodeListProps> = ({
-  episodes,
-  currentEpisodeId,
-  disabled = false,
-  onEpisodePress,
-  onEpisodeLongPress,
-  onFocus,
-  onBlur,
-  scrollViewRef,
-  firstEpisodeRefSetter,
-  emptyText,
-  horizontalPadding,
-}) => {
-  const renderItem = useCallback(
-    ({ item: episode, index }: { item: BaseItemDto; index: number }) => {
-      const isCurrent = currentEpisodeId
-        ? episode.Id === currentEpisodeId
-        : false;
-      return (
-        <TVPosterCard
-          item={episode}
-          orientation='horizontal'
-          onPress={() => onEpisodePress(episode)}
-          onLongPress={
-            onEpisodeLongPress ? () => onEpisodeLongPress(episode) : undefined
-          }
-          onFocus={onFocus}
-          onBlur={onBlur}
-          disabled={isCurrent || disabled}
-          focusableWhenDisabled={isCurrent}
-          isCurrent={isCurrent}
-          refSetter={index === 0 ? firstEpisodeRefSetter : undefined}
-        />
-      );
-    },
-    [
-      currentEpisodeId,
-      disabled,
-      firstEpisodeRefSetter,
-      onBlur,
-      onEpisodeLongPress,
-      onEpisodePress,
-      onFocus,
-    ],
-  );
-
-  const keyExtractor = useCallback((episode: BaseItemDto) => episode.Id!, []);
-
-  return (
-    <TVHorizontalList
-      data={episodes}
-      keyExtractor={keyExtractor}
-      renderItem={renderItem}
-      emptyText={emptyText}
-      scrollViewRef={scrollViewRef}
-      horizontalPadding={horizontalPadding}
-    />
-  );
-};
--- a/components/series/TVSeriesPage.tsx
+++ b/components/series/TVSeriesPage.tsx
@@ -27,14 +27,11 @@ import { ItemImage } from "@/components/common/ItemImage";
 import { Text } from "@/components/common/Text";
 import { getItemNavigation } from "@/components/common/TouchableItemRouter";
 import { seasonIndexAtom } from "@/components/series/SeasonPicker";
-import { TVEpisodeList } from "@/components/series/TVEpisodeList";
+import { TVEpisodeCard } from "@/components/series/TVEpisodeCard";
 import { TVSeriesHeader } from "@/components/series/TVSeriesHeader";
-import { TVFavoriteButton } from "@/components/tv/TVFavoriteButton";
 import { useScaledTVTypography } from "@/constants/TVTypography";
 import useRouter from "@/hooks/useAppRouter";
-import { useTVItemActionModal } from "@/hooks/useTVItemActionModal";
 import { useTVSeriesSeasonModal } from "@/hooks/useTVSeriesSeasonModal";
-import { useTVThemeMusic } from "@/hooks/useTVThemeMusic";
 import { useDownload } from "@/providers/DownloadProvider";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { useOfflineMode } from "@/providers/OfflineModeProvider";
@@ -49,6 +46,7 @@ const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get("window");
 const HORIZONTAL_PADDING = 80;
 const TOP_PADDING = 140;
 const POSTER_WIDTH_PERCENT = 0.22;
+const ITEM_GAP = 16;
 const SCALE_PADDING = 20;

 interface TVSeriesPageProps {
@@ -227,13 +225,9 @@ export const TVSeriesPage: React.FC<TVSeriesPageProps> = ({
  const [user] = useAtom(userAtom);
  const { getDownloadedItems, downloadedItems } = useDownload();
  const { showSeasonModal } = useTVSeriesSeasonModal();
-  const { showItemActions } = useTVItemActionModal();
  const seasonModalState = useAtomValue(tvSeriesSeasonModalAtom);
  const isSeasonModalVisible = seasonModalState !== null;

-  // Auto-play theme music (handles fade in/out and cleanup)
-  useTVThemeMusic(item.Id);
-
  // Season state
  const [seasonIndexState, setSeasonIndexState] = useAtom(seasonIndexAtom);
  const selectedSeasonIndex = useMemo(
@@ -252,13 +246,24 @@ export const TVSeriesPage: React.FC<TVSeriesPageProps> = ({
  const [focusedCount, setFocusedCount] = useState(0);
  const prevFocusedCount = useRef(0);

-  // Track focus count for episode list
+  // Scroll back to start when episode list loses focus
  useEffect(() => {
+    if (prevFocusedCount.current > 0 && focusedCount === 0) {
+      episodeListRef.current?.scrollTo({ x: 0, animated: true });
+      // Scroll page back to top when leaving episode section
+      mainScrollRef.current?.scrollTo({ y: 0, animated: true });
+    }
    prevFocusedCount.current = focusedCount;
  }, [focusedCount]);

  const handleEpisodeFocus = useCallback(() => {
-    setFocusedCount((c) => c + 1);
+    setFocusedCount((c) => {
+      // Scroll page down when first episode receives focus
+      if (c === 0) {
+        mainScrollRef.current?.scrollTo({ y: 200, animated: true });
+      }
+      return c + 1;
+    });
  }, []);

  const handleEpisodeBlur = useCallback(() => {
@@ -504,14 +509,40 @@ export const TVSeriesPage: React.FC<TVSeriesPageProps> = ({
        }}
        showsVerticalScrollIndicator={false}
      >
-        {/* Top section - Content + Poster */}
+        {/* Top section - Poster + Content */}
        <View
          style={{
            flexDirection: "row",
            minHeight: SCREEN_HEIGHT * 0.45,
          }}
        >
-          {/* Left side - Content */}
+          {/* Left side - Poster */}
+          <View
+            style={{
+              width: SCREEN_WIDTH * POSTER_WIDTH_PERCENT,
+              marginRight: 50,
+            }}
+          >
+            <View
+              style={{
+                aspectRatio: 2 / 3,
+                borderRadius: 16,
+                overflow: "hidden",
+                shadowColor: "#000",
+                shadowOffset: { width: 0, height: 10 },
+                shadowOpacity: 0.5,
+                shadowRadius: 20,
+              }}
+            >
+              <ItemImage
+                variant='Primary'
+                item={item}
+                style={{ width: "100%", height: "100%" }}
+              />
+            </View>
+          </View>
+
+          {/* Right side - Content */}
          <View style={{ flex: 1, justifyContent: "center" }}>
            <TVSeriesHeader item={item} />

@@ -554,34 +585,6 @@ export const TVSeriesPage: React.FC<TVSeriesPageProps> = ({
                  disabled={isSeasonModalVisible}
                />
              )}
-
-              <TVFavoriteButton item={item} disabled={isSeasonModalVisible} />
-            </View>
-          </View>
-
-          {/* Right side - Poster */}
-          <View
-            style={{
-              width: SCREEN_WIDTH * POSTER_WIDTH_PERCENT,
-              marginLeft: 50,
-            }}
-          >
-            <View
-              style={{
-                aspectRatio: 2 / 3,
-                borderRadius: 16,
-                overflow: "hidden",
-                shadowColor: "#000",
-                shadowOffset: { width: 0, height: 10 },
-                shadowOpacity: 0.5,
-                shadowRadius: 20,
-              }}
-            >
-              <ItemImage
-                variant='Primary'
-                item={item}
-                style={{ width: "100%", height: "100%" }}
-              />
            </View>
          </View>
        </View>
@@ -616,18 +619,43 @@ export const TVSeriesPage: React.FC<TVSeriesPageProps> = ({
            />
          )}

-          <TVEpisodeList
-            episodes={episodesForSeason}
-            disabled={isSeasonModalVisible}
-            onEpisodePress={handleEpisodePress}
-            onEpisodeLongPress={showItemActions}
-            onFocus={handleEpisodeFocus}
-            onBlur={handleEpisodeBlur}
-            scrollViewRef={episodeListRef}
-            firstEpisodeRefSetter={setFirstEpisodeRef}
-            emptyText={t("item_card.no_episodes_for_this_season")}
-            horizontalPadding={HORIZONTAL_PADDING}
-          />
+          <ScrollView
+            ref={episodeListRef}
+            horizontal
+            showsHorizontalScrollIndicator={false}
+            style={{ overflow: "visible" }}
+            contentContainerStyle={{
+              paddingVertical: SCALE_PADDING,
+              paddingHorizontal: SCALE_PADDING,
+              gap: ITEM_GAP,
+            }}
+          >
+            {episodesForSeason.length > 0 ? (
+              episodesForSeason.map((episode, index) => (
+                <TVEpisodeCard
+                  key={episode.Id}
+                  episode={episode}
+                  onPress={() => handleEpisodePress(episode)}
+                  onFocus={handleEpisodeFocus}
+                  onBlur={handleEpisodeBlur}
+                  disabled={isSeasonModalVisible}
+                  // Pass refSetter to first episode for focus guide destination
+                  // Note: Do NOT use hasTVPreferredFocus on focus guide destinations
+                  refSetter={index === 0 ? setFirstEpisodeRef : undefined}
+                />
+              ))
+            ) : (
+              <Text
+                style={{
+                  color: "#737373",
+                  fontSize: typography.callout,
+                  marginLeft: SCALE_PADDING,
+                }}
+              >
+                {t("item_card.no_episodes_for_this_season")}
+              </Text>
+            )}
+          </ScrollView>
        </View>
      </ScrollView>
    </View>
--- a/components/settings/MpvBufferSettings.tsx
+++ b/components/settings/MpvBufferSettings.tsx
@@ -1,100 +0,0 @@
-import { Ionicons } from "@expo/vector-icons";
-import type React from "react";
-import { useMemo } from "react";
-import { useTranslation } from "react-i18next";
-import { View } from "react-native";
-import { Stepper } from "@/components/inputs/Stepper";
-import { PlatformDropdown } from "@/components/PlatformDropdown";
-import { type MpvCacheMode, useSettings } from "@/utils/atoms/settings";
-import { Text } from "../common/Text";
-import { ListGroup } from "../list/ListGroup";
-import { ListItem } from "../list/ListItem";
-
-const CACHE_MODE_OPTIONS: { key: string; value: MpvCacheMode }[] = [
-  { key: "home.settings.buffer.cache_auto", value: "auto" },
-  { key: "home.settings.buffer.cache_yes", value: "yes" },
-  { key: "home.settings.buffer.cache_no", value: "no" },
-];
-
-export const MpvBufferSettings: React.FC = () => {
-  const { settings, updateSettings } = useSettings();
-  const { t } = useTranslation();
-
-  const cacheModeOptions = useMemo(
-    () => [
-      {
-        options: CACHE_MODE_OPTIONS.map((option) => ({
-          type: "radio" as const,
-          label: t(option.key),
-          value: option.value,
-          selected: option.value === (settings?.mpvCacheEnabled ?? "auto"),
-          onPress: () => updateSettings({ mpvCacheEnabled: option.value }),
-        })),
-      },
-    ],
-    [settings?.mpvCacheEnabled, t, updateSettings],
-  );
-
-  const currentCacheModeLabel = useMemo(() => {
-    const option = CACHE_MODE_OPTIONS.find(
-      (o) => o.value === (settings?.mpvCacheEnabled ?? "auto"),
-    );
-    return option ? t(option.key) : t("home.settings.buffer.cache_auto");
-  }, [settings?.mpvCacheEnabled, t]);
-
-  if (!settings) return null;
-
-  return (
-    <ListGroup title={t("home.settings.buffer.title")} className='mb-4'>
-      <ListItem title={t("home.settings.buffer.cache_mode")}>
-        <PlatformDropdown
-          groups={cacheModeOptions}
-          trigger={
-            <View className='flex flex-row items-center justify-between py-1.5 pl-3'>
-              <Text className='mr-1 text-[#8E8D91]'>
-                {currentCacheModeLabel}
-              </Text>
-              <Ionicons name='chevron-expand-sharp' size={18} color='#5A5960' />
-            </View>
-          }
-          title={t("home.settings.buffer.cache_mode")}
-        />
-      </ListItem>
-
-      <ListItem title={t("home.settings.buffer.buffer_duration")}>
-        <Stepper
-          value={settings.mpvCacheSeconds ?? 10}
-          step={5}
-          min={5}
-          max={120}
-          onUpdate={(value) => updateSettings({ mpvCacheSeconds: value })}
-          appendValue='s'
-        />
-      </ListItem>
-
-      <ListItem title={t("home.settings.buffer.max_cache_size")}>
-        <Stepper
-          value={settings.mpvDemuxerMaxBytes ?? 150}
-          step={25}
-          min={50}
-          max={500}
-          onUpdate={(value) => updateSettings({ mpvDemuxerMaxBytes: value })}
-          appendValue=' MB'
-        />
-      </ListItem>
-
-      <ListItem title={t("home.settings.buffer.max_backward_cache")}>
-        <Stepper
-          value={settings.mpvDemuxerMaxBackBytes ?? 50}
-          step={25}
-          min={25}
-          max={200}
-          onUpdate={(value) =>
-            updateSettings({ mpvDemuxerMaxBackBytes: value })
-          }
-          appendValue=' MB'
-        />
-      </ListItem>
-    </ListGroup>
-  );
-};
--- a/components/settings/MpvSubtitleSettings.tsx
+++ b/components/settings/MpvSubtitleSettings.tsx
@@ -1,6 +1,6 @@
 import { Ionicons } from "@expo/vector-icons";
 import { useMemo } from "react";
-import { Platform, Switch, View, type ViewProps } from "react-native";
+import { Platform, View, type ViewProps } from "react-native";
 import { Stepper } from "@/components/inputs/Stepper";
 import { Text } from "../common/Text";
 import { ListGroup } from "../list/ListGroup";
@@ -55,6 +55,7 @@ export const MpvSubtitleSettings: React.FC<Props> = ({ ...props }) => {
    return [{ options }];
  }, [settings?.mpvSubtitleAlignY, updateSettings]);

+  if (isTv) return null;
  if (!settings) return null;

  return (
@@ -67,83 +68,65 @@ export const MpvSubtitleSettings: React.FC<Props> = ({ ...props }) => {
          </Text>
        }
      >
-        {!isTv && (
-          <>
-            <ListItem title='Vertical Margin'>
-              <Stepper
-                value={settings.mpvSubtitleMarginY ?? 0}
-                step={5}
-                min={0}
-                max={100}
-                onUpdate={(value) =>
-                  updateSettings({ mpvSubtitleMarginY: value })
-                }
-              />
-            </ListItem>
-
-            <ListItem title='Horizontal Alignment'>
-              <PlatformDropdown
-                groups={alignXOptionGroups}
-                trigger={
-                  <View className='flex flex-row items-center justify-between py-1.5 pl-3'>
-                    <Text className='mr-1 text-[#8E8D91]'>
-                      {alignXLabels[settings?.mpvSubtitleAlignX ?? "center"]}
-                    </Text>
-                    <Ionicons
-                      name='chevron-expand-sharp'
-                      size={18}
-                      color='#5A5960'
-                    />
-                  </View>
-                }
-                title='Horizontal Alignment'
-              />
-            </ListItem>
-
-            <ListItem title='Vertical Alignment'>
-              <PlatformDropdown
-                groups={alignYOptionGroups}
-                trigger={
-                  <View className='flex flex-row items-center justify-between py-1.5 pl-3'>
-                    <Text className='mr-1 text-[#8E8D91]'>
-                      {alignYLabels[settings?.mpvSubtitleAlignY ?? "bottom"]}
-                    </Text>
-                    <Ionicons
-                      name='chevron-expand-sharp'
-                      size={18}
-                      color='#5A5960'
-                    />
-                  </View>
-                }
-                title='Vertical Alignment'
-              />
-            </ListItem>
-          </>
-        )}
-
-        <ListItem title='Opaque Background'>
-          <Switch
-            value={settings.mpvSubtitleBackgroundEnabled ?? false}
-            onValueChange={(value) =>
-              updateSettings({ mpvSubtitleBackgroundEnabled: value })
+        <ListItem title='Subtitle Scale'>
+          <Stepper
+            value={settings.mpvSubtitleScale ?? 1.0}
+            step={0.1}
+            min={0.5}
+            max={2.0}
+            onUpdate={(value) =>
+              updateSettings({ mpvSubtitleScale: Math.round(value * 10) / 10 })
            }
          />
        </ListItem>

-        {settings.mpvSubtitleBackgroundEnabled && (
-          <ListItem title='Background Opacity'>
-            <Stepper
-              value={settings.mpvSubtitleBackgroundOpacity ?? 75}
-              step={5}
-              min={10}
-              max={100}
-              appendValue='%'
-              onUpdate={(value) =>
-                updateSettings({ mpvSubtitleBackgroundOpacity: value })
-              }
-            />
-          </ListItem>
-        )}
+        <ListItem title='Vertical Margin'>
+          <Stepper
+            value={settings.mpvSubtitleMarginY ?? 0}
+            step={5}
+            min={0}
+            max={100}
+            onUpdate={(value) => updateSettings({ mpvSubtitleMarginY: value })}
+          />
+        </ListItem>
+
+        <ListItem title='Horizontal Alignment'>
+          <PlatformDropdown
+            groups={alignXOptionGroups}
+            trigger={
+              <View className='flex flex-row items-center justify-between py-1.5 pl-3'>
+                <Text className='mr-1 text-[#8E8D91]'>
+                  {alignXLabels[settings?.mpvSubtitleAlignX ?? "center"]}
+                </Text>
+                <Ionicons
+                  name='chevron-expand-sharp'
+                  size={18}
+                  color='#5A5960'
+                />
+              </View>
+            }
+            title='Horizontal Alignment'
+          />
+        </ListItem>
+
+        <ListItem title='Vertical Alignment'>
+          <PlatformDropdown
+            groups={alignYOptionGroups}
+            trigger={
+              <View className='flex flex-row items-center justify-between py-1.5 pl-3'>
+                <Text className='mr-1 text-[#8E8D91]'>
+                  {alignYLabels[settings?.mpvSubtitleAlignY ?? "bottom"]}
+                </Text>
+                <Ionicons
+                  name='chevron-expand-sharp'
+                  size={18}
+                  color='#5A5960'
+                />
+              </View>
+            }
+            title='Vertical Alignment'
+          />
+        </ListItem>
      </ListGroup>
    </View>
  );
--- a/components/settings/SubtitleToggles.tsx
+++ b/components/settings/SubtitleToggles.tsx
@@ -166,13 +166,13 @@ export const SubtitleToggles: React.FC<Props> = ({ ...props }) => {
          disabled={pluginSettings?.subtitleSize?.locked}
        >
          <Stepper
-            value={settings.mpvSubtitleScale ?? 1.0}
+            value={settings.subtitleSize / 100}
            disabled={pluginSettings?.subtitleSize?.locked}
            step={0.1}
-            min={0.1}
-            max={3.0}
+            min={0.3}
+            max={1.5}
            onUpdate={(value) =>
-              updateSettings({ mpvSubtitleScale: Math.round(value * 10) / 10 })
+              updateSettings({ subtitleSize: Math.round(value * 100) })
            }
          />
        </ListItem>
--- a/components/tv/TVActorCard.tsx
+++ b/components/tv/TVActorCard.tsx
@@ -21,7 +21,7 @@ export const TVActorCard = React.forwardRef<View, TVActorCardProps>(
  ({ person, apiBasePath, onPress, hasTVPreferredFocus }, ref) => {
    const typography = useScaledTVTypography();
    const { focused, handleFocus, handleBlur, animatedStyle } =
-      useTVFocusAnimation();
+      useTVFocusAnimation({ scaleAmount: 1.08 });

    const imageUrl = person.Id
      ? `${apiBasePath}/Items/${person.Id}/Images/Primary?fillWidth=280&fillHeight=280&quality=90`
@@ -56,8 +56,8 @@ export const TVActorCard = React.forwardRef<View, TVActorCardProps>(
              overflow: "hidden",
              backgroundColor: "rgba(255,255,255,0.1)",
              marginBottom: 14,
-              borderWidth: 2,
-              borderColor: focused ? "#FFFFFF" : "transparent",
+              borderWidth: focused ? 3 : 0,
+              borderColor: "#fff",
            }}
          >
            {imageUrl ? (
--- a/components/tv/TVCastSection.tsx
+++ b/components/tv/TVCastSection.tsx
@@ -3,7 +3,6 @@ import React from "react";
 import { useTranslation } from "react-i18next";
 import { ScrollView, TVFocusGuideView, View } from "react-native";
 import { Text } from "@/components/common/Text";
-import { useScaledTVSizes } from "@/constants/TVSizes";
 import { useScaledTVTypography } from "@/constants/TVTypography";
 import { TVActorCard } from "./TVActorCard";

@@ -26,7 +25,6 @@ export const TVCastSection: React.FC<TVCastSectionProps> = React.memo(
    upwardFocusDestination,
  }) => {
    const typography = useScaledTVTypography();
-    const sizes = useScaledTVSizes();
    const { t } = useTranslation();

    if (cast.length === 0) {
@@ -59,7 +57,7 @@ export const TVCastSection: React.FC<TVCastSectionProps> = React.memo(
          contentContainerStyle={{
            paddingHorizontal: 80,
            paddingVertical: 16,
-            gap: sizes.gaps.item,
+            gap: 28,
          }}
        >
          {cast.map((person, index) => (
--- a/components/tv/TVControlButton.tsx
+++ b/components/tv/TVControlButton.tsx
@@ -4,12 +4,14 @@ import {
  Pressable,
  Animated as RNAnimated,
  StyleSheet,
+  Text,
  type View,
 } from "react-native";
 import { useTVFocusAnimation } from "./hooks/useTVFocusAnimation";

 export interface TVControlButtonProps {
-  icon: keyof typeof Ionicons.glyphMap;
+  icon?: keyof typeof Ionicons.glyphMap;
+  text?: string;
  onPress: () => void;
  onLongPress?: () => void;
  onPressOut?: () => void;
@@ -23,6 +25,7 @@ export interface TVControlButtonProps {

 export const TVControlButton: FC<TVControlButtonProps> = ({
  icon,
+  text,
  onPress,
  onLongPress,
  onPressOut,
@@ -63,7 +66,11 @@ export const TVControlButton: FC<TVControlButtonProps> = ({
          },
        ]}
      >
-        <Ionicons name={icon} size={size} color='#fff' />
+        {text ? (
+          <Text style={[styles.text, { fontSize: size * 0.4 }]}>{text}</Text>
+        ) : (
+          <Ionicons name={icon!} size={size} color='#fff' />
+        )}
      </RNAnimated.View>
    </Pressable>
  );
@@ -78,4 +85,9 @@ const styles = StyleSheet.create({
    justifyContent: "center",
    alignItems: "center",
  },
+  text: {
+    color: "#fff",
+    fontWeight: "600",
+    textAlign: "center",
+  },
 });
--- a/Show More
+++ b/Show More