diff --git a/k-tv-frontend/app/(main)/dashboard/components/access-settings-editor.tsx b/k-tv-frontend/app/(main)/dashboard/components/access-settings-editor.tsx
new file mode 100644
index 0000000..948cda6
--- /dev/null
+++ b/k-tv-frontend/app/(main)/dashboard/components/access-settings-editor.tsx
@@ -0,0 +1,57 @@
+import type { AccessMode } from "@/lib/types";
+
+interface AccessSettingsEditorProps {
+  accessMode: AccessMode;
+  accessPassword: string;
+  onAccessModeChange: (mode: AccessMode) => void;
+  onAccessPasswordChange: (pw: string) => void;
+  label?: string;
+  passwordLabel?: string;
+  passwordHint?: string;
+}
+
+export function AccessSettingsEditor({
+  accessMode,
+  accessPassword,
+  onAccessModeChange,
+  onAccessPasswordChange,
+  label = "Access",
+  passwordLabel = "Password",
+  passwordHint = "Leave blank to keep existing password",
+}: AccessSettingsEditorProps) {
+  return (
+    <div className="space-y-2">
+      <div className="space-y-1.5">
+        <label className="block text-xs font-medium text-zinc-400">{label}</label>
+        <select
+          value={accessMode}
+          onChange={(e) => {
+            onAccessModeChange(e.target.value as AccessMode);
+            onAccessPasswordChange("");
+          }}
+          className="w-full rounded-md border border-zinc-700 bg-zinc-800 px-3 py-2 text-sm text-zinc-100 focus:border-zinc-500 focus:outline-none"
+        >
+          <option value="public">Public</option>
+          <option value="password_protected">Password protected</option>
+          <option value="account_required">Account required</option>
+          <option value="owner_only">Owner only</option>
+        </select>
+      </div>
+
+      {accessMode === "password_protected" && (
+        <div className="space-y-1.5">
+          <label className="block text-xs font-medium text-zinc-400">
+            {passwordLabel}
+          </label>
+          <input
+            type="password"
+            placeholder={passwordHint}
+            value={accessPassword}
+            onChange={(e) => onAccessPasswordChange(e.target.value)}
+            className="w-full rounded-md border border-zinc-700 bg-zinc-800 px-3 py-2 text-sm text-zinc-100 placeholder:text-zinc-600 focus:border-zinc-500 focus:outline-none"
+          />
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/k-tv-frontend/app/(main)/dashboard/components/algorithmic-filter-editor.tsx b/k-tv-frontend/app/(main)/dashboard/components/algorithmic-filter-editor.tsx
new file mode 100644
index 0000000..a32a135
--- /dev/null
+++ b/k-tv-frontend/app/(main)/dashboard/components/algorithmic-filter-editor.tsx
@@ -0,0 +1,342 @@
+"use client";
+
+import { useState } from "react";
+import { TagInput } from "./tag-input";
+import { SeriesPicker } from "./series-picker";
+import { FilterPreview } from "./filter-preview";
+import { useCollections, useSeries, useGenres } from "@/hooks/use-library";
+import type {
+  BlockContent,
+  ContentType,
+  FillStrategy,
+  MediaFilter,
+  ProviderInfo,
+} from "@/lib/types";
+import type { FieldErrors } from "@/lib/schemas";
+
+function Field({
+  label,
+  hint,
+  error,
+  children,
+}: {
+  label: string;
+  hint?: string;
+  error?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="space-y-1.5">
+      <label className="block text-xs font-medium text-zinc-400">{label}</label>
+      {children}
+      {error ? (
+        <p className="text-[11px] text-red-400">{error}</p>
+      ) : hint ? (
+        <p className="text-[11px] text-zinc-600">{hint}</p>
+      ) : null}
+    </div>
+  );
+}
+
+function NativeSelect({
+  value,
+  onChange,
+  children,
+}: {
+  value: string;
+  onChange: (v: string) => void;
+  children: React.ReactNode;
+}) {
+  return (
+    <select
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+      className="w-full rounded-md border border-zinc-700 bg-zinc-800 px-3 py-2 text-sm text-zinc-100 focus:border-zinc-500 focus:outline-none"
+    >
+      {children}
+    </select>
+  );
+}
+
+function NumberInput({
+  value,
+  onChange,
+  min,
+  placeholder,
+  error,
+}: {
+  value: number | "";
+  onChange: (v: number | "") => void;
+  min?: number;
+  placeholder?: string;
+  error?: boolean;
+}) {
+  return (
+    <input
+      type="number"
+      min={min}
+      value={value}
+      placeholder={placeholder}
+      onChange={(e) =>
+        onChange(e.target.value === "" ? "" : Number(e.target.value))
+      }
+      className={`w-full rounded-md border bg-zinc-800 px-3 py-2 text-sm text-zinc-100 placeholder:text-zinc-600 focus:outline-none ${error ? "border-red-500 focus:border-red-400" : "border-zinc-700 focus:border-zinc-500"}`}
+    />
+  );
+}
+
+interface AlgorithmicFilterEditorProps {
+  content: Extract<BlockContent, { type: "algorithmic" }>;
+  pfx: string;
+  errors: FieldErrors;
+  providers: ProviderInfo[];
+  setFilter: (patch: Partial<MediaFilter>) => void;
+  setStrategy: (strategy: FillStrategy) => void;
+  setProviderId: (id: string) => void;
+}
+
+export function AlgorithmicFilterEditor({
+  content,
+  pfx,
+  errors,
+  providers,
+  setFilter,
+  setStrategy,
+  setProviderId,
+}: AlgorithmicFilterEditorProps) {
+  const [showGenres, setShowGenres] = useState(false);
+
+  const providerId = content.provider_id ?? "";
+  const capabilities =
+    providers.find((p) => p.id === providerId)?.capabilities ??
+    providers[0]?.capabilities;
+
+  const { data: collections, isLoading: loadingCollections } = useCollections(
+    providerId || undefined,
+  );
+  const { data: series, isLoading: loadingSeries } = useSeries(undefined, {
+    enabled: capabilities?.series !== false,
+    provider: providerId || undefined,
+  });
+  const { data: genreOptions } = useGenres(
+    content.filter.content_type ?? undefined,
+    {
+      enabled: capabilities?.genres !== false,
+      provider: providerId || undefined,
+    },
+  );
+
+  const isEpisode = content.filter.content_type === "episode";
+  const collectionLabel =
+    capabilities?.collections && !capabilities?.series && !capabilities?.genres
+      ? "Directory"
+      : "Library";
+
+  return (
+    <div className="space-y-3 rounded-md border border-zinc-700/50 bg-zinc-800 p-3">
+      <p className="text-[11px] font-medium uppercase tracking-wider text-zinc-500">
+        Filter
+      </p>
+
+      {providers.length > 1 && (
+        <Field label="Provider">
+          <NativeSelect value={providerId} onChange={setProviderId}>
+            {providers.map((p) => (
+              <option key={p.id} value={p.id}>
+                {p.id}
+              </option>
+            ))}
+          </NativeSelect>
+        </Field>
+      )}
+
+      <div className="grid grid-cols-2 gap-3">
+        <Field label="Media type">
+          <NativeSelect
+            value={content.filter.content_type ?? ""}
+            onChange={(v) =>
+              setFilter({
+                content_type: v === "" ? null : (v as ContentType),
+                series_names:
+                  v !== "episode" ? [] : content.filter.series_names,
+              })
+            }
+          >
+            <option value="">Any</option>
+            <option value="movie">Movie</option>
+            <option value="episode">Episode</option>
+            <option value="short">Short</option>
+          </NativeSelect>
+        </Field>
+        <Field label="Strategy">
+          <NativeSelect
+            value={content.strategy}
+            onChange={(v) => setStrategy(v as FillStrategy)}
+          >
+            <option value="random">Random</option>
+            <option value="best_fit">Best fit</option>
+            <option value="sequential">Sequential</option>
+          </NativeSelect>
+        </Field>
+      </div>
+
+      {isEpisode && capabilities?.series !== false && (
+        <Field
+          label="Series"
+          hint={
+            content.strategy === "sequential"
+              ? "Episodes will play in chronological order"
+              : "Filter to specific shows, or leave empty for all"
+          }
+        >
+          <SeriesPicker
+            values={content.filter.series_names ?? []}
+            onChange={(v) => setFilter({ series_names: v })}
+            series={series ?? []}
+            isLoading={loadingSeries}
+          />
+        </Field>
+      )}
+
+      <Field
+        label={collectionLabel}
+        hint={
+          loadingCollections
+            ? `Loading ${collectionLabel.toLowerCase()}s…`
+            : collections
+              ? `Scope this block to one ${collectionLabel.toLowerCase()}`
+              : `Enter a provider ${collectionLabel.toLowerCase()} ID`
+        }
+      >
+        {collections && collections.length > 0 ? (
+          <NativeSelect
+            value={content.filter.collections[0] ?? ""}
+            onChange={(v) => setFilter({ collections: v ? [v] : [] })}
+          >
+            <option value="">All libraries</option>
+            {collections.map((c) => (
+              <option key={c.id} value={c.id}>
+                {c.name}
+                {c.collection_type ? ` (${c.collection_type})` : ""}
+              </option>
+            ))}
+          </NativeSelect>
+        ) : (
+          <TagInput
+            values={content.filter.collections}
+            onChange={(v) => setFilter({ collections: v })}
+            placeholder="Library ID…"
+          />
+        )}
+      </Field>
+
+      {capabilities?.genres !== false && (
+        <Field label="Genres" hint="Press Enter or comma to add">
+          <TagInput
+            values={content.filter.genres}
+            onChange={(v) => setFilter({ genres: v })}
+            placeholder="Comedy, Animation…"
+          />
+          {genreOptions && genreOptions.length > 0 && (
+            <div className="mt-1.5">
+              <button
+                type="button"
+                onClick={() => setShowGenres((s) => !s)}
+                className="text-[11px] text-zinc-600 hover:text-zinc-400"
+              >
+                {showGenres ? "Hide" : "Browse"} available genres
+              </button>
+              {showGenres && (
+                <div className="mt-1.5 flex flex-wrap gap-1">
+                  {genreOptions
+                    .filter((g) => !content.filter.genres.includes(g))
+                    .map((g) => (
+                      <button
+                        key={g}
+                        type="button"
+                        onClick={() =>
+                          setFilter({ genres: [...content.filter.genres, g] })
+                        }
+                        className="rounded px-1.5 py-0.5 text-[11px] bg-zinc-700/50 text-zinc-400 hover:bg-zinc-700 hover:text-zinc-200"
+                      >
+                        + {g}
+                      </button>
+                    ))}
+                </div>
+              )}
+            </div>
+          )}
+        </Field>
+      )}
+
+      <Field label="Tags" hint="Press Enter or comma to add">
+        <TagInput
+          values={content.filter.tags}
+          onChange={(v) => setFilter({ tags: v })}
+          placeholder="classic, family…"
+        />
+      </Field>
+
+      <div className="grid grid-cols-3 gap-3">
+        <Field
+          label="Decade"
+          hint="e.g. 1990"
+          error={errors[`${pfx}.content.filter.decade`]}
+        >
+          <NumberInput
+            value={content.filter.decade ?? ""}
+            onChange={(v) =>
+              setFilter({ decade: v === "" ? null : (v as number) })
+            }
+            placeholder="1990"
+            error={!!errors[`${pfx}.content.filter.decade`]}
+          />
+        </Field>
+        <Field
+          label="Min duration (min)"
+          error={errors[`${pfx}.content.filter.min_duration_secs`]}
+        >
+          <NumberInput
+            value={
+              content.filter.min_duration_secs != null
+                ? Math.round(content.filter.min_duration_secs / 60)
+                : ""
+            }
+            onChange={(v) =>
+              setFilter({
+                min_duration_secs: v === "" ? null : (v as number) * 60,
+              })
+            }
+            placeholder="30"
+            error={!!errors[`${pfx}.content.filter.min_duration_secs`]}
+          />
+        </Field>
+        <Field
+          label="Max duration (min)"
+          error={errors[`${pfx}.content.filter.max_duration_secs`]}
+        >
+          <NumberInput
+            value={
+              content.filter.max_duration_secs != null
+                ? Math.round(content.filter.max_duration_secs / 60)
+                : ""
+            }
+            onChange={(v) =>
+              setFilter({
+                max_duration_secs: v === "" ? null : (v as number) * 60,
+              })
+            }
+            placeholder="120"
+            error={!!errors[`${pfx}.content.filter.max_duration_secs`]}
+          />
+        </Field>
+      </div>
+
+      <FilterPreview
+        filter={content.filter}
+        strategy={content.strategy}
+        provider={providerId || undefined}
+      />
+    </div>
+  );
+}
diff --git a/k-tv-frontend/app/(main)/dashboard/components/dashboard-header.tsx b/k-tv-frontend/app/(main)/dashboard/components/dashboard-header.tsx
new file mode 100644
index 0000000..956aa21
--- /dev/null
+++ b/k-tv-frontend/app/(main)/dashboard/components/dashboard-header.tsx
@@ -0,0 +1,85 @@
+import { Plus, Upload, RefreshCw, Antenna, Settings2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import type { ProviderCapabilities } from "@/lib/types";
+
+interface DashboardHeaderProps {
+  hasChannels: boolean;
+  canTranscode: boolean;
+  canRescan: boolean;
+  isRegeneratingAll: boolean;
+  isRescanPending: boolean;
+  capabilities: ProviderCapabilities | undefined;
+  onTranscodeOpen: () => void;
+  onRescan: () => void;
+  onRegenerateAll: () => void;
+  onIptvOpen: () => void;
+  onImportOpen: () => void;
+  onCreateOpen: () => void;
+}
+
+export function DashboardHeader({
+  hasChannels,
+  canTranscode,
+  canRescan,
+  isRegeneratingAll,
+  isRescanPending,
+  onTranscodeOpen,
+  onRescan,
+  onRegenerateAll,
+  onIptvOpen,
+  onImportOpen,
+  onCreateOpen,
+}: DashboardHeaderProps) {
+  return (
+    <div className="flex items-center justify-between">
+      <div>
+        <h1 className="text-xl font-semibold text-zinc-100">My Channels</h1>
+        <p className="mt-0.5 text-sm text-zinc-500">Build your broadcast lineup</p>
+      </div>
+      <div className="flex gap-2">
+        {canTranscode && (
+          <Button onClick={onTranscodeOpen} title="Transcode settings">
+            <Settings2 className="size-4" />
+            Transcode
+          </Button>
+        )}
+        {canRescan && (
+          <Button
+            onClick={onRescan}
+            disabled={isRescanPending}
+            title="Rescan local files directory"
+          >
+            <RefreshCw
+              className={`size-4 ${isRescanPending ? "animate-spin" : ""}`}
+            />
+            Rescan library
+          </Button>
+        )}
+        {hasChannels && (
+          <Button
+            onClick={onRegenerateAll}
+            disabled={isRegeneratingAll}
+            title="Regenerate schedules for all channels"
+          >
+            <RefreshCw
+              className={`size-4 ${isRegeneratingAll ? "animate-spin" : ""}`}
+            />
+            Regenerate all
+          </Button>
+        )}
+        <Button onClick={onIptvOpen}>
+          <Antenna className="size-4" />
+          IPTV
+        </Button>
+        <Button onClick={onImportOpen}>
+          <Upload className="size-4" />
+          Import
+        </Button>
+        <Button onClick={onCreateOpen}>
+          <Plus className="size-4" />
+          New channel
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/k-tv-frontend/app/(main)/dashboard/components/edit-channel-sheet.tsx b/k-tv-frontend/app/(main)/dashboard/components/edit-channel-sheet.tsx
index 85d6083..dcd4b6a 100644
--- a/k-tv-frontend/app/(main)/dashboard/components/edit-channel-sheet.tsx
+++ b/k-tv-frontend/app/(main)/dashboard/components/edit-channel-sheet.tsx
@@ -1,15 +1,23 @@
 "use client";
 
-import { useState, useEffect, useRef } from "react";
-import { z } from "zod";
+import { useState } from "react";
 import { Trash2, Plus } from "lucide-react";
-import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/components/ui/sheet";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet";
 import { Button } from "@/components/ui/button";
-import { TagInput } from "./tag-input";
 import { BlockTimeline, BLOCK_COLORS, minsToTime } from "./block-timeline";
-import { SeriesPicker } from "./series-picker";
-import { FilterPreview } from "./filter-preview";
-import { useCollections, useSeries, useGenres } from "@/hooks/use-library";
+import { AlgorithmicFilterEditor } from "./algorithmic-filter-editor";
+import { RecyclePolicyEditor } from "./recycle-policy-editor";
+import { WebhookEditor } from "./webhook-editor";
+import { AccessSettingsEditor } from "./access-settings-editor";
+import { LogoEditor } from "./logo-editor";
+import { useChannelForm } from "@/hooks/use-channel-form";
+import { channelFormSchema, extractErrors } from "@/lib/schemas";
+import type { FieldErrors } from "@/lib/schemas";
 import type {
   AccessMode,
   ChannelResponse,
@@ -17,108 +25,13 @@ import type {
   ProgrammingBlock,
   BlockContent,
   FillStrategy,
-  ContentType,
   MediaFilter,
   ProviderInfo,
   RecyclePolicy,
 } from "@/lib/types";
 
 // ---------------------------------------------------------------------------
-// Webhook preset templates (frontend-only, zero backend changes needed)
-// ---------------------------------------------------------------------------
-
-const WEBHOOK_PRESETS = {
-  discord: `{
-  "embeds": [{
-    "title": "📺 {{event}}",
-    "description": "{{#if data.item.title}}Now playing: **{{data.item.title}}**{{else}}No signal{{/if}}",
-    "color": 3447003,
-    "timestamp": "{{timestamp}}"
-  }]
-}`,
-  slack: `{
-  "text": "📺 *{{event}}*{{#if data.item.title}} — {{data.item.title}}{{/if}}"
-}`,
-} as const;
-
-type WebhookFormat = "default" | "discord" | "slack" | "custom";
-
-// ---------------------------------------------------------------------------
-// Zod schemas
-// ---------------------------------------------------------------------------
-
-const mediaFilterSchema = z.object({
-  content_type: z.enum(["movie", "episode", "short"]).nullable().optional(),
-  genres: z.array(z.string()),
-  decade: z
-    .number()
-    .int()
-    .min(1900, "Decade must be ≥ 1900")
-    .max(2099, "Decade must be ≤ 2090")
-    .nullable()
-    .optional(),
-  tags: z.array(z.string()),
-  min_duration_secs: z.number().min(0, "Must be ≥ 0").nullable().optional(),
-  max_duration_secs: z.number().min(0, "Must be ≥ 0").nullable().optional(),
-  collections: z.array(z.string()),
-  series_names: z.array(z.string()),
-  search_term: z.string().nullable().optional(),
-});
-
-const accessModeSchema = z.enum(["public", "password_protected", "account_required", "owner_only"]);
-
-const blockSchema = z.object({
-  id: z.string(),
-  name: z.string().min(1, "Block name is required"),
-  start_time: z.string(),
-  duration_mins: z.number().int().min(1, "Must be at least 1 minute"),
-  content: z.discriminatedUnion("type", [
-    z.object({
-      type: z.literal("algorithmic"),
-      filter: mediaFilterSchema,
-      strategy: z.enum(["best_fit", "sequential", "random"]),
-      provider_id: z.string().optional(),
-    }),
-    z.object({
-      type: z.literal("manual"),
-      items: z.array(z.string()),
-      provider_id: z.string().optional(),
-    }),
-  ]),
-  loop_on_finish: z.boolean().optional(),
-  ignore_recycle_policy: z.boolean().optional(),
-  access_mode: accessModeSchema.optional(),
-  access_password: z.string().optional(),
-});
-
-const channelFormSchema = z.object({
-  name: z.string().min(1, "Name is required"),
-  timezone: z.string().min(1, "Timezone is required"),
-  description: z.string().optional(),
-  blocks: z.array(blockSchema),
-  recycle_policy: z.object({
-    cooldown_days: z.number().int().min(0).nullable().optional(),
-    cooldown_generations: z.number().int().min(0).nullable().optional(),
-    min_available_ratio: z.number().min(0, "Must be ≥ 0").max(1, "Must be ≤ 1"),
-  }),
-  auto_schedule: z.boolean(),
-  access_mode: accessModeSchema.optional(),
-  access_password: z.string().optional(),
-});
-
-type FieldErrors = Record<string, string | undefined>;
-
-function extractErrors(err: z.ZodError): FieldErrors {
-  const map: FieldErrors = {};
-  for (const issue of err.issues) {
-    const key = issue.path.join(".");
-    if (!map[key]) map[key] = issue.message;
-  }
-  return map;
-}
-
-// ---------------------------------------------------------------------------
-// Field wrapper
+// Local shared primitives (only used inside this file)
 // ---------------------------------------------------------------------------
 
 function Field({
@@ -173,28 +86,21 @@ function NumberInput({
   value,
   onChange,
   min,
-  max,
-  step,
-  placeholder,
   error,
 }: {
   value: number | "";
   onChange: (v: number | "") => void;
   min?: number;
-  max?: number;
-  step?: number | "any";
-  placeholder?: string;
   error?: boolean;
 }) {
   return (
     <input
       type="number"
       min={min}
-      max={max}
-      step={step}
       value={value}
-      placeholder={placeholder}
-      onChange={(e) => onChange(e.target.value === "" ? "" : Number(e.target.value))}
+      onChange={(e) =>
+        onChange(e.target.value === "" ? "" : Number(e.target.value))
+      }
       className={`w-full rounded-md border bg-zinc-800 px-3 py-2 text-sm text-zinc-100 placeholder:text-zinc-600 focus:outline-none ${error ? "border-red-500 focus:border-red-400" : "border-zinc-700 focus:border-zinc-500"}`}
     />
   );
@@ -220,10 +126,6 @@ function NativeSelect({
   );
 }
 
-// ---------------------------------------------------------------------------
-// Defaults
-// ---------------------------------------------------------------------------
-
 function defaultFilter(): MediaFilter {
   return {
     content_type: null,
@@ -238,256 +140,19 @@ function defaultFilter(): MediaFilter {
   };
 }
 
-function defaultBlock(startMins = 20 * 60, durationMins = 60): ProgrammingBlock {
-  return {
-    id: crypto.randomUUID(),
-    name: "",
-    start_time: minsToTime(startMins),
-    duration_mins: durationMins,
-    content: { type: "algorithmic", filter: defaultFilter(), strategy: "random" },
-    loop_on_finish: true,
-    ignore_recycle_policy: false,
-    access_mode: "public",
-  };
-}
-
 // ---------------------------------------------------------------------------
-// AlgorithmicFilterEditor — filter section with live library data
-// ---------------------------------------------------------------------------
-
-interface AlgorithmicFilterEditorProps {
-  content: Extract<BlockContent, { type: "algorithmic" }>;
-  pfx: string;
-  errors: FieldErrors;
-  setFilter: (patch: Partial<MediaFilter>) => void;
-  setStrategy: (strategy: FillStrategy) => void;
-  setProviderId: (id: string) => void;
-  providers: ProviderInfo[];
-}
-
-function AlgorithmicFilterEditor({
-  content,
-  pfx,
-  errors,
-  setFilter,
-  setStrategy,
-  setProviderId,
-  providers,
-}: AlgorithmicFilterEditorProps) {
-  const [showGenres, setShowGenres] = useState(false);
-
-  const providerId = content.provider_id ?? "";
-  const capabilities = providers.find((p) => p.id === providerId)?.capabilities
-    ?? providers[0]?.capabilities;
-
-  const { data: collections, isLoading: loadingCollections } = useCollections(providerId || undefined);
-  const { data: series, isLoading: loadingSeries } = useSeries(undefined, {
-    enabled: capabilities?.series !== false,
-    provider: providerId || undefined,
-  });
-  const { data: genreOptions } = useGenres(content.filter.content_type ?? undefined, {
-    enabled: capabilities?.genres !== false,
-    provider: providerId || undefined,
-  });
-
-  const isEpisode = content.filter.content_type === "episode";
-  const collectionLabel =
-    capabilities?.collections && !capabilities?.series && !capabilities?.genres
-      ? "Directory"
-      : "Library";
-
-  return (
-    <div className="space-y-3 rounded-md border border-zinc-700/50 bg-zinc-800 p-3">
-      <p className="text-[11px] font-medium uppercase tracking-wider text-zinc-500">Filter</p>
-
-      {providers.length > 1 && (
-        <Field label="Provider">
-          <NativeSelect value={providerId} onChange={(v) => setProviderId(v)}>
-            {providers.map((p) => (
-              <option key={p.id} value={p.id}>{p.id}</option>
-            ))}
-          </NativeSelect>
-        </Field>
-      )}
-
-      <div className="grid grid-cols-2 gap-3">
-        <Field label="Media type">
-          <NativeSelect
-            value={content.filter.content_type ?? ""}
-            onChange={(v) =>
-              setFilter({
-                content_type: v === "" ? null : (v as ContentType),
-                // clear series names if switching away from episode
-                series_names: v !== "episode" ? [] : content.filter.series_names,
-              })
-            }
-          >
-            <option value="">Any</option>
-            <option value="movie">Movie</option>
-            <option value="episode">Episode</option>
-            <option value="short">Short</option>
-          </NativeSelect>
-        </Field>
-        <Field label="Strategy">
-          <NativeSelect
-            value={content.strategy}
-            onChange={(v) => setStrategy(v as FillStrategy)}
-          >
-            <option value="random">Random</option>
-            <option value="best_fit">Best fit</option>
-            <option value="sequential">Sequential</option>
-          </NativeSelect>
-        </Field>
-      </div>
-
-      {/* Series — only meaningful for episodes when provider supports it */}
-      {isEpisode && capabilities?.series !== false && (
-        <Field
-          label="Series"
-          hint={
-            content.strategy === "sequential"
-              ? "Episodes will play in chronological order"
-              : "Filter to specific shows, or leave empty for all"
-          }
-        >
-          <SeriesPicker
-            values={content.filter.series_names ?? []}
-            onChange={(v) => setFilter({ series_names: v })}
-            series={series ?? []}
-            isLoading={loadingSeries}
-          />
-        </Field>
-      )}
-
-      {/* Library/Directory — real collection names when the provider supports it */}
-      <Field
-        label={collectionLabel}
-        hint={
-          loadingCollections
-            ? `Loading ${collectionLabel.toLowerCase()}s…`
-            : collections
-              ? `Scope this block to one ${collectionLabel.toLowerCase()}`
-              : `Enter a provider ${collectionLabel.toLowerCase()} ID`
-        }
-      >
-        {collections && collections.length > 0 ? (
-          <NativeSelect
-            value={content.filter.collections[0] ?? ""}
-            onChange={(v) => setFilter({ collections: v ? [v] : [] })}
-          >
-            <option value="">All libraries</option>
-            {collections.map((c) => (
-              <option key={c.id} value={c.id}>
-                {c.name}
-                {c.collection_type ? ` (${c.collection_type})` : ""}
-              </option>
-            ))}
-          </NativeSelect>
-        ) : (
-          <TagInput
-            values={content.filter.collections}
-            onChange={(v) => setFilter({ collections: v })}
-            placeholder="Library ID…"
-          />
-        )}
-      </Field>
-
-      {/* Genres — only shown when provider supports it */}
-      {capabilities?.genres !== false && (
-      <Field label="Genres" hint="Press Enter or comma to add">
-        <TagInput
-          values={content.filter.genres}
-          onChange={(v) => setFilter({ genres: v })}
-          placeholder="Comedy, Animation…"
-        />
-        {genreOptions && genreOptions.length > 0 && (
-          <div className="mt-1.5">
-            <button
-              type="button"
-              onClick={() => setShowGenres((s) => !s)}
-              className="text-[11px] text-zinc-600 hover:text-zinc-400"
-            >
-              {showGenres ? "Hide" : "Browse"} available genres
-            </button>
-            {showGenres && (
-              <div className="mt-1.5 flex flex-wrap gap-1">
-                {genreOptions
-                  .filter((g) => !content.filter.genres.includes(g))
-                  .map((g) => (
-                    <button
-                      key={g}
-                      type="button"
-                      onClick={() => setFilter({ genres: [...content.filter.genres, g] })}
-                      className="rounded px-1.5 py-0.5 text-[11px] bg-zinc-700/50 text-zinc-400 hover:bg-zinc-700 hover:text-zinc-200"
-                    >
-                      + {g}
-                    </button>
-                  ))}
-              </div>
-            )}
-          </div>
-        )}
-      </Field>
-      )}
-
-      <Field label="Tags" hint="Press Enter or comma to add">
-        <TagInput
-          values={content.filter.tags}
-          onChange={(v) => setFilter({ tags: v })}
-          placeholder="classic, family…"
-        />
-      </Field>
-
-      <div className="grid grid-cols-3 gap-3">
-        <Field label="Decade" hint="e.g. 1990" error={errors[`${pfx}.content.filter.decade`]}>
-          <NumberInput
-            value={content.filter.decade ?? ""}
-            onChange={(v) => setFilter({ decade: v === "" ? null : (v as number) })}
-            placeholder="1990"
-            error={!!errors[`${pfx}.content.filter.decade`]}
-          />
-        </Field>
-        <Field label="Min duration (min)" error={errors[`${pfx}.content.filter.min_duration_secs`]}>
-          <NumberInput
-            value={content.filter.min_duration_secs != null ? Math.round(content.filter.min_duration_secs / 60) : ""}
-            onChange={(v) =>
-              setFilter({ min_duration_secs: v === "" ? null : (v as number) * 60 })
-            }
-            placeholder="30"
-            error={!!errors[`${pfx}.content.filter.min_duration_secs`]}
-          />
-        </Field>
-        <Field label="Max duration (min)" error={errors[`${pfx}.content.filter.max_duration_secs`]}>
-          <NumberInput
-            value={content.filter.max_duration_secs != null ? Math.round(content.filter.max_duration_secs / 60) : ""}
-            onChange={(v) =>
-              setFilter({ max_duration_secs: v === "" ? null : (v as number) * 60 })
-            }
-            placeholder="120"
-            error={!!errors[`${pfx}.content.filter.max_duration_secs`]}
-          />
-        </Field>
-      </div>
-
-      {/* Preview — snapshot of current filter+strategy, only fetches on explicit click */}
-      <FilterPreview filter={content.filter} strategy={content.strategy} provider={providerId || undefined} />
-    </div>
-  );
-}
-
-// ---------------------------------------------------------------------------
-// BlockEditor (detail form for a single block)
+// BlockEditor — inline because it's only used here and depends on local types
 // ---------------------------------------------------------------------------
 
 interface BlockEditorProps {
   block: ProgrammingBlock;
   index: number;
   errors: FieldErrors;
-  onChange: (block: ProgrammingBlock) => void;
   providers: ProviderInfo[];
+  onChange: (block: ProgrammingBlock) => void;
 }
 
-function BlockEditor({ block, index, errors, onChange, providers }: BlockEditorProps) {
+function BlockEditor({ block, index, errors, providers, onChange }: BlockEditorProps) {
   const setField = <K extends keyof ProgrammingBlock>(key: K, value: ProgrammingBlock[K]) =>
     onChange({ ...block, [key]: value });
 
@@ -515,9 +180,8 @@ function BlockEditor({ block, index, errors, onChange, providers }: BlockEditorP
     onChange({ ...block, content: { ...content, strategy } });
   };
 
-  const setProviderId = (id: string) => {
+  const setProviderId = (id: string) =>
     onChange({ ...block, content: { ...content, provider_id: id } });
-  };
 
   return (
     <div className="space-y-3">
@@ -566,10 +230,10 @@ function BlockEditor({ block, index, errors, onChange, providers }: BlockEditorP
             content={content}
             pfx={pfx}
             errors={errors}
+            providers={providers}
             setFilter={setFilter}
             setStrategy={setStrategy}
             setProviderId={setProviderId}
-            providers={providers}
           />
 
           {content.strategy === "sequential" && (
@@ -577,11 +241,13 @@ function BlockEditor({ block, index, errors, onChange, providers }: BlockEditorP
               <p className="text-[11px] font-medium uppercase tracking-wider text-zinc-500">
                 Sequential options
               </p>
-              <label className="flex items-center gap-2 cursor-pointer">
+              <label className="flex cursor-pointer items-center gap-2">
                 <input
                   type="checkbox"
                   checked={block.loop_on_finish ?? true}
-                  onChange={(e) => onChange({ ...block, loop_on_finish: e.target.checked })}
+                  onChange={(e) =>
+                    onChange({ ...block, loop_on_finish: e.target.checked })
+                  }
                   className="accent-zinc-400"
                 />
                 <span className="text-sm text-zinc-300">Loop series</span>
@@ -589,11 +255,13 @@ function BlockEditor({ block, index, errors, onChange, providers }: BlockEditorP
                   Restart from episode 1 after the final episode
                 </span>
               </label>
-              <label className="flex items-center gap-2 cursor-pointer">
+              <label className="flex cursor-pointer items-center gap-2">
                 <input
                   type="checkbox"
                   checked={block.ignore_recycle_policy ?? false}
-                  onChange={(e) => onChange({ ...block, ignore_recycle_policy: e.target.checked })}
+                  onChange={(e) =>
+                    onChange({ ...block, ignore_recycle_policy: e.target.checked })
+                  }
                   className="accent-zinc-400"
                 />
                 <span className="text-sm text-zinc-300">Independent scheduling</span>
@@ -608,7 +276,9 @@ function BlockEditor({ block, index, errors, onChange, providers }: BlockEditorP
 
       {content.type === "manual" && (
         <div className="space-y-2 rounded-md border border-zinc-700/50 bg-zinc-800 p-3">
-          <p className="text-[11px] font-medium uppercase tracking-wider text-zinc-500">Item IDs</p>
+          <p className="text-[11px] font-medium uppercase tracking-wider text-zinc-500">
+            Item IDs
+          </p>
           <textarea
             rows={3}
             value={content.items.join("\n")}
@@ -617,97 +287,42 @@ function BlockEditor({ block, index, errors, onChange, providers }: BlockEditorP
                 ...block,
                 content: {
                   type: "manual",
-                  items: e.target.value.split("\n").map((s) => s.trim()).filter(Boolean),
+                  items: e.target.value
+                    .split("\n")
+                    .map((s) => s.trim())
+                    .filter(Boolean),
                 },
               })
             }
             placeholder={"abc123\ndef456\nghi789"}
             className="w-full resize-none rounded-md border border-zinc-700 bg-zinc-800 px-3 py-2 font-mono text-xs text-zinc-100 placeholder:text-zinc-600 focus:border-zinc-500 focus:outline-none"
           />
-          <p className="text-[11px] text-zinc-600">One Jellyfin item ID per line, played in order.</p>
+          <p className="text-[11px] text-zinc-600">
+            One Jellyfin item ID per line, played in order.
+          </p>
         </div>
       )}
 
-      {/* Block-level access control */}
       <div className="space-y-2 rounded-md border border-zinc-700/50 bg-zinc-800 p-3">
-        <p className="text-[11px] font-medium uppercase tracking-wider text-zinc-500">Block access</p>
-        <NativeSelect
-          value={block.access_mode ?? "public"}
-          onChange={(v) => onChange({ ...block, access_mode: v as AccessMode })}
-        >
-          <option value="public">Public</option>
-          <option value="password_protected">Password protected</option>
-          <option value="account_required">Account required</option>
-          <option value="owner_only">Owner only</option>
-        </NativeSelect>
-        {(block.access_mode === "password_protected") && (
-          <input
-            type="password"
-            placeholder="Block password (leave blank to keep existing)"
-            value={block.access_password ?? ""}
-            onChange={(e) => onChange({ ...block, access_password: e.target.value })}
-            className="w-full rounded-md border border-zinc-700 bg-zinc-800 px-3 py-2 text-sm text-zinc-100 placeholder:text-zinc-600 focus:border-zinc-500 focus:outline-none"
-          />
-        )}
-      </div>
-    </div>
-  );
-}
-
-// ---------------------------------------------------------------------------
-// Recycle policy editor
-// ---------------------------------------------------------------------------
-
-function RecyclePolicyEditor({
-  policy,
-  errors,
-  onChange,
-}: {
-  policy: RecyclePolicy;
-  errors: FieldErrors;
-  onChange: (policy: RecyclePolicy) => void;
-}) {
-  return (
-    <div className="space-y-3">
-      <div className="grid grid-cols-2 gap-3">
-        <Field label="Cooldown (days)" hint="Don't replay within N days">
-          <NumberInput
-            value={policy.cooldown_days ?? ""}
-            onChange={(v) => onChange({ ...policy, cooldown_days: v === "" ? null : (v as number) })}
-            min={0}
-            placeholder="7"
-          />
-        </Field>
-        <Field label="Cooldown (generations)" hint="Don't replay within N schedules">
-          <NumberInput
-            value={policy.cooldown_generations ?? ""}
-            onChange={(v) => onChange({ ...policy, cooldown_generations: v === "" ? null : (v as number) })}
-            min={0}
-            placeholder="3"
-          />
-        </Field>
-      </div>
-      <Field
-        label="Min available ratio"
-        hint="0.0–1.0 · Fraction of the pool kept selectable even if cooldown is active"
-        error={errors["recycle_policy.min_available_ratio"]}
-      >
-        <NumberInput
-          value={policy.min_available_ratio}
-          onChange={(v) => onChange({ ...policy, min_available_ratio: v === "" ? 0.1 : (v as number) })}
-          min={0}
-          max={1}
-          step={0.01}
-          placeholder="0.1"
-          error={!!errors["recycle_policy.min_available_ratio"]}
+        <p className="text-[11px] font-medium uppercase tracking-wider text-zinc-500">
+          Block access
+        </p>
+        <AccessSettingsEditor
+          accessMode={(block.access_mode as AccessMode) ?? "public"}
+          accessPassword={block.access_password ?? ""}
+          onAccessModeChange={(m) => onChange({ ...block, access_mode: m })}
+          onAccessPasswordChange={(pw) => onChange({ ...block, access_password: pw })}
+          label="Access mode"
+          passwordLabel="Block password"
+          passwordHint="Leave blank to keep existing"
         />
-      </Field>
+      </div>
     </div>
   );
 }
 
 // ---------------------------------------------------------------------------
-// Main sheet
+// EditChannelSheet
 // ---------------------------------------------------------------------------
 
 interface EditChannelSheetProps {
@@ -748,69 +363,22 @@ export function EditChannelSheet({
   error,
   providers = [],
 }: EditChannelSheetProps) {
-  const [name, setName] = useState("");
-  const [description, setDescription] = useState("");
-  const [timezone, setTimezone] = useState("UTC");
-  const [blocks, setBlocks] = useState<ProgrammingBlock[]>([]);
-  const [recyclePolicy, setRecyclePolicy] = useState<RecyclePolicy>({
-    cooldown_days: null,
-    cooldown_generations: null,
-    min_available_ratio: 0.1,
-  });
-  const [autoSchedule, setAutoSchedule] = useState(false);
-  const [accessMode, setAccessMode] = useState<AccessMode>("public");
-  const [accessPassword, setAccessPassword] = useState("");
-  const [logo, setLogo] = useState<string | null>(null);
-  const [logoPosition, setLogoPosition] = useState<LogoPosition>("top_right");
-  const [logoOpacity, setLogoOpacity] = useState(100);
-  const [webhookUrl, setWebhookUrl] = useState("");
-  const [webhookPollInterval, setWebhookPollInterval] = useState<number | "">(5);
-  const [webhookFormat, setWebhookFormat] = useState<WebhookFormat>("default");
-  const [webhookBodyTemplate, setWebhookBodyTemplate] = useState("");
-  const [webhookHeaders, setWebhookHeaders] = useState("");
-  const [selectedBlockId, setSelectedBlockId] = useState<string | null>(null);
+  const form = useChannelForm(channel);
   const [fieldErrors, setFieldErrors] = useState<FieldErrors>({});
-  const fileInputRef = useRef<HTMLInputElement>(null);
-
-  useEffect(() => {
-    if (channel) {
-      setName(channel.name);
-      setDescription(channel.description ?? "");
-      setTimezone(channel.timezone);
-      setBlocks(channel.schedule_config.blocks);
-      setRecyclePolicy(channel.recycle_policy);
-      setAutoSchedule(channel.auto_schedule);
-      setAccessMode(channel.access_mode ?? "public");
-      setAccessPassword("");
-      setLogo(channel.logo ?? null);
-      setLogoPosition(channel.logo_position ?? "top_right");
-      setLogoOpacity(Math.round((channel.logo_opacity ?? 1) * 100));
-      setWebhookUrl(channel.webhook_url ?? "");
-      setWebhookPollInterval(channel.webhook_poll_interval_secs ?? 5);
-      const tmpl = channel.webhook_body_template ?? "";
-      setWebhookBodyTemplate(tmpl);
-      setWebhookHeaders(channel.webhook_headers ?? "");
-      if (!tmpl) {
-        setWebhookFormat("default");
-      } else if (tmpl === WEBHOOK_PRESETS.discord) {
-        setWebhookFormat("discord");
-      } else if (tmpl === WEBHOOK_PRESETS.slack) {
-        setWebhookFormat("slack");
-      } else {
-        setWebhookFormat("custom");
-      }
-      setSelectedBlockId(null);
-      setFieldErrors({});
-    }
-  }, [channel]);
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
     if (!channel) return;
 
     const result = channelFormSchema.safeParse({
-      name, description, timezone, blocks, recycle_policy: recyclePolicy,
-      auto_schedule: autoSchedule, access_mode: accessMode, access_password: accessPassword,
+      name: form.name,
+      description: form.description,
+      timezone: form.timezone,
+      blocks: form.blocks,
+      recycle_policy: form.recyclePolicy,
+      auto_schedule: form.autoSchedule,
+      access_mode: form.accessMode,
+      access_password: form.accessPassword,
     });
 
     if (!result.success) {
@@ -820,40 +388,26 @@ export function EditChannelSheet({
 
     setFieldErrors({});
     onSubmit(channel.id, {
-      name,
-      description,
-      timezone,
-      schedule_config: { blocks },
-      recycle_policy: recyclePolicy,
-      auto_schedule: autoSchedule,
-      access_mode: accessMode !== "public" ? accessMode : "public",
-      access_password: accessPassword || "",
-      logo: logo,
-      logo_position: logoPosition,
-      logo_opacity: logoOpacity / 100,
-      webhook_url: webhookUrl || null,
-      ...(webhookUrl
-        ? { webhook_poll_interval_secs: webhookPollInterval === "" ? 5 : webhookPollInterval }
+      name: form.name,
+      description: form.description,
+      timezone: form.timezone,
+      schedule_config: { blocks: form.blocks },
+      recycle_policy: form.recyclePolicy,
+      auto_schedule: form.autoSchedule,
+      access_mode: form.accessMode !== "public" ? form.accessMode : "public",
+      access_password: form.accessPassword || "",
+      logo: form.logo,
+      logo_position: form.logoPosition,
+      logo_opacity: form.logoOpacity / 100,
+      webhook_url: form.webhookUrl || null,
+      ...(form.webhookUrl
+        ? {
+            webhook_poll_interval_secs:
+              form.webhookPollInterval === "" ? 5 : form.webhookPollInterval,
+          }
         : {}),
-      webhook_body_template: webhookBodyTemplate || null,
-      webhook_headers: webhookHeaders || null,
-    });
-  };
-
-  const addBlock = (startMins = 20 * 60, durationMins = 60) => {
-    const block = defaultBlock(startMins, durationMins);
-    setBlocks((prev) => [...prev, block]);
-    setSelectedBlockId(block.id);
-  };
-
-  const updateBlock = (idx: number, block: ProgrammingBlock) =>
-    setBlocks((prev) => prev.map((b, i) => (i === idx ? block : b)));
-
-  const removeBlock = (idx: number) => {
-    setBlocks((prev) => {
-      const next = prev.filter((_, i) => i !== idx);
-      if (selectedBlockId === prev[idx].id) setSelectedBlockId(null);
-      return next;
+      webhook_body_template: form.webhookBodyTemplate || null,
+      webhook_headers: form.webhookHeaders || null,
     });
   };
 
@@ -869,27 +423,32 @@ export function EditChannelSheet({
 
         <form onSubmit={handleSubmit} className="flex flex-1 flex-col overflow-hidden">
           <div className="flex flex-1 overflow-hidden">
-            {/* Left column — basic info, logo, recycle policy, webhook */}
-            <div className="w-[300px] shrink-0 overflow-y-auto border-r border-zinc-800 px-5 py-4 space-y-6">
-              {/* Basic info */}
+            {/* Left sidebar */}
+            <div className="w-[300px] shrink-0 space-y-6 overflow-y-auto border-r border-zinc-800 px-5 py-4">
               <section className="space-y-3">
-                <h3 className="text-xs font-semibold uppercase tracking-wider text-zinc-500">Basic info</h3>
+                <h3 className="text-xs font-semibold uppercase tracking-wider text-zinc-500">
+                  Basic info
+                </h3>
 
                 <Field label="Name" error={fieldErrors["name"]}>
                   <TextInput
                     required
-                    value={name}
-                    onChange={setName}
+                    value={form.name}
+                    onChange={form.setName}
                     placeholder="90s Sitcom Network"
                     error={!!fieldErrors["name"]}
                   />
                 </Field>
 
-                <Field label="Timezone" hint="IANA timezone, e.g. America/New_York" error={fieldErrors["timezone"]}>
+                <Field
+                  label="Timezone"
+                  hint="IANA timezone, e.g. America/New_York"
+                  error={fieldErrors["timezone"]}
+                >
                   <TextInput
                     required
-                    value={timezone}
-                    onChange={setTimezone}
+                    value={form.timezone}
+                    onChange={form.setTimezone}
                     placeholder="UTC"
                     error={!!fieldErrors["timezone"]}
                   />
@@ -897,233 +456,94 @@ export function EditChannelSheet({
 
                 <Field label="Description">
                   <textarea
-                    value={description}
-                    onChange={(e) => setDescription(e.target.value)}
+                    value={form.description}
+                    onChange={(e) => form.setDescription(e.target.value)}
                     rows={2}
                     placeholder="Nothing but classic sitcoms, all day"
                     className="w-full resize-none rounded-md border border-zinc-700 bg-zinc-800 px-3 py-2 text-sm text-zinc-100 placeholder:text-zinc-600 focus:border-zinc-500 focus:outline-none"
                   />
                 </Field>
 
-                <label className="flex items-center justify-between gap-3 cursor-pointer rounded-md border border-zinc-700 bg-zinc-800/50 px-3 py-2.5">
+                <label className="flex cursor-pointer items-center justify-between gap-3 rounded-md border border-zinc-700 bg-zinc-800/50 px-3 py-2.5">
                   <div>
                     <p className="text-sm text-zinc-200">Auto-generate schedule</p>
-                    <p className="text-[11px] text-zinc-600">Automatically regenerate when the schedule is about to expire</p>
+                    <p className="text-[11px] text-zinc-600">
+                      Automatically regenerate when the schedule is about to expire
+                    </p>
                   </div>
                   <button
                     type="button"
                     role="switch"
-                    aria-checked={autoSchedule}
-                    onClick={() => setAutoSchedule((v) => !v)}
-                    className={`relative inline-flex h-5 w-9 shrink-0 rounded-full border-2 border-transparent transition-colors focus:outline-none ${autoSchedule ? "bg-zinc-300" : "bg-zinc-700"}`}
+                    aria-checked={form.autoSchedule}
+                    onClick={() => form.setAutoSchedule((v) => !v)}
+                    className={`relative inline-flex h-5 w-9 shrink-0 rounded-full border-2 border-transparent transition-colors focus:outline-none ${form.autoSchedule ? "bg-zinc-300" : "bg-zinc-700"}`}
                   >
                     <span
-                      className={`pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-sm transition-transform ${autoSchedule ? "translate-x-4" : "translate-x-0"}`}
+                      className={`pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-sm transition-transform ${form.autoSchedule ? "translate-x-4" : "translate-x-0"}`}
                     />
                   </button>
                 </label>
 
                 <Field label="Channel access">
-                  <NativeSelect value={accessMode} onChange={(v) => { setAccessMode(v as AccessMode); setAccessPassword(""); }}>
-                    <option value="public">Public</option>
-                    <option value="password_protected">Password protected</option>
-                    <option value="account_required">Account required</option>
-                    <option value="owner_only">Owner only</option>
-                  </NativeSelect>
+                  <AccessSettingsEditor
+                    accessMode={form.accessMode}
+                    accessPassword={form.accessPassword}
+                    onAccessModeChange={form.setAccessMode}
+                    onAccessPasswordChange={form.setAccessPassword}
+                    label="Access mode"
+                    passwordLabel="Channel password"
+                    passwordHint="Leave blank to keep existing password"
+                  />
                 </Field>
-
-                {accessMode === "password_protected" && (
-                  <Field label="Channel password" hint="Leave blank to keep existing password">
-                    <TextInput
-                      value={accessPassword}
-                      onChange={setAccessPassword}
-                      placeholder="New password…"
-                    />
-                  </Field>
-                )}
               </section>
 
-              {/* Logo */}
               <section className="space-y-3">
-                <h3 className="text-xs font-semibold uppercase tracking-wider text-zinc-500">Logo</h3>
-
-                <div className="space-y-3 rounded-md border border-zinc-700/50 bg-zinc-800/50 p-3">
-                  <div className="flex gap-2">
-                    <Button
-                      type="button"
-                      variant="outline"
-                      size="xs"
-                      className="border-zinc-700 text-zinc-300 hover:text-zinc-100"
-                      onClick={() => fileInputRef.current?.click()}
-                    >
-                      Upload image
-                    </Button>
-                    {logo && (
-                      <Button
-                        type="button"
-                        variant="ghost"
-                        size="xs"
-                        className="text-zinc-500 hover:text-red-400"
-                        onClick={() => setLogo(null)}
-                      >
-                        Clear
-                      </Button>
-                    )}
-                    <input
-                      ref={fileInputRef}
-                      type="file"
-                      accept="image/*,.svg"
-                      className="hidden"
-                      onChange={(e) => {
-                        const file = e.target.files?.[0];
-                        if (!file) return;
-                        const reader = new FileReader();
-                        reader.onload = (ev) => setLogo(ev.target?.result as string ?? null);
-                        reader.readAsDataURL(file);
-                        e.target.value = "";
-                      }}
-                    />
-                  </div>
-
-                  <Field label="URL or SVG markup" hint="Paste a remote URL, data URI, or inline SVG">
-                    <textarea
-                      rows={3}
-                      value={logo ?? ""}
-                      onChange={(e) => setLogo(e.target.value || null)}
-                      placeholder="https://… or <svg>…</svg>"
-                      className="w-full resize-none rounded-md border border-zinc-700 bg-zinc-800 px-3 py-2 font-mono text-xs text-zinc-100 placeholder:text-zinc-600 focus:border-zinc-500 focus:outline-none"
-                    />
-                  </Field>
-
-                  {logo && (
-                    <div className="flex items-center justify-center rounded-md border border-zinc-700 bg-zinc-900 p-3">
-                      {logo.trimStart().startsWith("<") ? (
-                        <div dangerouslySetInnerHTML={{ __html: logo }} className="h-12 w-auto" />
-                      ) : (
-                        // eslint-disable-next-line @next/next/no-img-element
-                        <img src={logo} alt="" className="h-12 w-auto object-contain" />
-                      )}
-                    </div>
-                  )}
-
-                  <div className="grid grid-cols-2 gap-3">
-                    <Field label="Position">
-                      <NativeSelect value={logoPosition} onChange={(v) => setLogoPosition(v as LogoPosition)}>
-                        <option value="top_left">Top left</option>
-                        <option value="top_right">Top right</option>
-                        <option value="bottom_left">Bottom left</option>
-                        <option value="bottom_right">Bottom right</option>
-                      </NativeSelect>
-                    </Field>
-                    <Field label={`Opacity (${logoOpacity}%)`}>
-                      <input
-                        type="range"
-                        min={0}
-                        max={100}
-                        value={logoOpacity}
-                        onChange={(e) => setLogoOpacity(Number(e.target.value))}
-                        className="w-full accent-zinc-400 mt-2"
-                      />
-                    </Field>
-                  </div>
-                </div>
-              </section>
-
-              {/* Recycle policy */}
-              <section className="space-y-3">
-                <h3 className="text-xs font-semibold uppercase tracking-wider text-zinc-500">Recycle policy</h3>
-                <RecyclePolicyEditor
-                  policy={recyclePolicy}
-                  errors={fieldErrors}
-                  onChange={setRecyclePolicy}
+                <h3 className="text-xs font-semibold uppercase tracking-wider text-zinc-500">
+                  Logo
+                </h3>
+                <LogoEditor
+                  logo={form.logo}
+                  logoPosition={form.logoPosition}
+                  logoOpacity={form.logoOpacity}
+                  onLogoChange={form.setLogo}
+                  onPositionChange={form.setLogoPosition}
+                  onOpacityChange={form.setLogoOpacity}
                 />
               </section>
 
-              {/* Webhook */}
               <section className="space-y-3">
-                <h3 className="text-xs font-semibold uppercase tracking-wider text-zinc-500">Webhook</h3>
-                <Field label="Webhook URL" hint="POST events to this URL on broadcast changes">
-                  <TextInput
-                    value={webhookUrl}
-                    onChange={setWebhookUrl}
-                    placeholder="https://example.com/webhook"
-                  />
-                </Field>
-                {webhookUrl && (
-                  <>
-                    <Field label="Poll interval (seconds)" hint="How often to check for broadcast changes">
-                      <NumberInput
-                        value={webhookPollInterval}
-                        onChange={setWebhookPollInterval}
-                        min={1}
-                        placeholder="5"
-                      />
-                    </Field>
+                <h3 className="text-xs font-semibold uppercase tracking-wider text-zinc-500">
+                  Recycle policy
+                </h3>
+                <RecyclePolicyEditor
+                  policy={form.recyclePolicy}
+                  errors={fieldErrors}
+                  onChange={form.setRecyclePolicy}
+                />
+              </section>
 
-                    <div className="space-y-2">
-                      <p className="text-xs text-zinc-400">Payload format</p>
-                      <div className="flex gap-1.5 flex-wrap">
-                        {(["default", "discord", "slack", "custom"] as WebhookFormat[]).map((fmt) => (
-                          <button
-                            key={fmt}
-                            type="button"
-                            onClick={() => {
-                              setWebhookFormat(fmt);
-                              if (fmt === "discord") setWebhookBodyTemplate(WEBHOOK_PRESETS.discord);
-                              else if (fmt === "slack") setWebhookBodyTemplate(WEBHOOK_PRESETS.slack);
-                              else if (fmt === "default") setWebhookBodyTemplate("");
-                            }}
-                            className={`rounded px-2.5 py-1 text-xs font-medium capitalize transition-colors ${
-                              webhookFormat === fmt
-                                ? "bg-zinc-600 text-zinc-100"
-                                : "bg-zinc-800 text-zinc-400 hover:bg-zinc-700 hover:text-zinc-200"
-                            }`}
-                          >
-                            {fmt === "default" ? "K-TV default" : fmt}
-                          </button>
-                        ))}
-                      </div>
-                    </div>
-
-                    {webhookFormat !== "default" && (
-                      <Field
-                        label="Body template (Handlebars)"
-                        hint="Context: event, timestamp, channel_id, data.item.title, data.item.duration_secs, …"
-                      >
-                        <textarea
-                          rows={6}
-                          value={webhookBodyTemplate}
-                          onChange={(e) => {
-                            setWebhookBodyTemplate(e.target.value);
-                            setWebhookFormat("custom");
-                          }}
-                          placeholder={'{\n  "text": "Now playing: {{data.item.title}}"\n}'}
-                          className="w-full resize-y rounded-md border border-zinc-700 bg-zinc-800 px-3 py-2 font-mono text-xs text-zinc-100 placeholder:text-zinc-600 focus:border-zinc-500 focus:outline-none"
-                        />
-                      </Field>
-                    )}
-
-                    <Field
-                      label="Extra headers (JSON)"
-                      hint={'e.g. {"Authorization": "Bearer token"}'}
-                    >
-                      <textarea
-                        rows={2}
-                        value={webhookHeaders}
-                        onChange={(e) => setWebhookHeaders(e.target.value)}
-                        placeholder={'{"Authorization": "Bearer xxx"}'}
-                        className="w-full resize-none rounded-md border border-zinc-700 bg-zinc-800 px-3 py-2 font-mono text-xs text-zinc-100 placeholder:text-zinc-600 focus:border-zinc-500 focus:outline-none"
-                      />
-                    </Field>
-                  </>
-                )}
+              <section className="space-y-3">
+                <h3 className="text-xs font-semibold uppercase tracking-wider text-zinc-500">
+                  Webhook
+                </h3>
+                <WebhookEditor
+                  webhookUrl={form.webhookUrl}
+                  webhookPollInterval={form.webhookPollInterval}
+                  webhookFormat={form.webhookFormat}
+                  webhookBodyTemplate={form.webhookBodyTemplate}
+                  webhookHeaders={form.webhookHeaders}
+                  onWebhookUrlChange={form.setWebhookUrl}
+                  onWebhookPollIntervalChange={form.setWebhookPollInterval}
+                  onWebhookFormatChange={form.setWebhookFormat}
+                  onWebhookBodyTemplateChange={form.setWebhookBodyTemplate}
+                  onWebhookHeadersChange={form.setWebhookHeaders}
+                />
               </section>
             </div>
 
-            {/* Right column — programming blocks */}
+            {/* Right: block editor */}
             <div className="flex flex-1 flex-col overflow-hidden">
-              {/* Upper half: timeline + block list */}
-              <div className="shrink-0 border-b border-zinc-800 px-5 py-4 space-y-3">
+              <div className="shrink-0 space-y-3 border-b border-zinc-800 px-5 py-4">
                 <div className="flex items-center justify-between">
                   <h3 className="text-xs font-semibold uppercase tracking-wider text-zinc-500">
                     Programming blocks
@@ -1132,7 +552,7 @@ export function EditChannelSheet({
                     type="button"
                     variant="outline"
                     size="xs"
-                    onClick={() => addBlock()}
+                    onClick={() => form.addBlock()}
                     className="border-zinc-700 text-zinc-300 hover:text-zinc-100"
                   >
                     <Plus className="size-3" />
@@ -1141,33 +561,38 @@ export function EditChannelSheet({
                 </div>
 
                 <BlockTimeline
-                  blocks={blocks}
-                  selectedId={selectedBlockId}
-                  onSelect={setSelectedBlockId}
-                  onChange={setBlocks}
-                  onCreateBlock={(startMins, durationMins) => addBlock(startMins, durationMins)}
+                  blocks={form.blocks}
+                  selectedId={form.selectedBlockId}
+                  onSelect={form.setSelectedBlockId}
+                  onChange={form.setBlocks}
+                  onCreateBlock={(startMins, durationMins) =>
+                    form.addBlock(startMins, durationMins)
+                  }
                 />
 
-                {blocks.length === 0 ? (
+                {form.blocks.length === 0 ? (
                   <p className="rounded-md border border-dashed border-zinc-700 px-4 py-4 text-center text-xs text-zinc-600">
                     No blocks yet. Drag on the timeline or click Add block.
                   </p>
                 ) : (
-                  <div className="space-y-1 max-h-48 overflow-y-auto">
-                    {blocks.map((block, idx) => (
+                  <div className="max-h-48 space-y-1 overflow-y-auto">
+                    {form.blocks.map((block, idx) => (
                       <button
                         key={block.id}
                         type="button"
-                        onClick={() => setSelectedBlockId(block.id)}
+                        onClick={() => form.setSelectedBlockId(block.id)}
                         className={`flex w-full items-center gap-2 rounded-md px-3 py-2 text-left transition-colors ${
-                          block.id === selectedBlockId
+                          block.id === form.selectedBlockId
                             ? "border border-zinc-600 bg-zinc-700/60"
                             : "border border-transparent hover:bg-zinc-800/60"
                         }`}
                       >
                         <div
                           className="h-2.5 w-2.5 shrink-0 rounded-full"
-                          style={{ backgroundColor: BLOCK_COLORS[idx % BLOCK_COLORS.length] }}
+                          style={{
+                            backgroundColor:
+                              BLOCK_COLORS[idx % BLOCK_COLORS.length],
+                          }}
                         />
                         <span className="flex-1 truncate text-sm text-zinc-200">
                           {block.name || "Unnamed block"}
@@ -1177,7 +602,10 @@ export function EditChannelSheet({
                         </span>
                         <span
                           role="button"
-                          onClick={(e) => { e.stopPropagation(); removeBlock(idx); }}
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            form.removeBlock(idx);
+                          }}
                           className="rounded p-1 text-zinc-600 hover:bg-zinc-700 hover:text-red-400"
                         >
                           <Trash2 className="size-3.5" />
@@ -1188,18 +616,20 @@ export function EditChannelSheet({
                 )}
               </div>
 
-              {/* Lower half: selected block detail */}
               <div className="flex-1 overflow-y-auto px-5 py-4">
                 {(() => {
-                  if (selectedBlockId === null) {
+                  if (form.selectedBlockId === null) {
                     return (
                       <div className="flex h-full items-center justify-center text-sm text-zinc-600">
                         Select a block or create one
                       </div>
                     );
                   }
-                  const selectedIdx = blocks.findIndex((b) => b.id === selectedBlockId);
-                  const selectedBlock = selectedIdx >= 0 ? blocks[selectedIdx] : null;
+                  const selectedIdx = form.blocks.findIndex(
+                    (b) => b.id === form.selectedBlockId,
+                  );
+                  const selectedBlock =
+                    selectedIdx >= 0 ? form.blocks[selectedIdx] : null;
                   if (!selectedBlock) {
                     return (
                       <div className="flex h-full items-center justify-center text-sm text-zinc-600">
@@ -1212,8 +642,8 @@ export function EditChannelSheet({
                       block={selectedBlock}
                       index={selectedIdx}
                       errors={fieldErrors}
-                      onChange={(b) => updateBlock(selectedIdx, b)}
                       providers={providers}
+                      onChange={(b) => form.updateBlock(selectedIdx, b)}
                     />
                   );
                 })()}
@@ -1221,7 +651,6 @@ export function EditChannelSheet({
             </div>
           </div>
 
-          {/* Footer */}
           <div className="flex items-center justify-between border-t border-zinc-800 px-6 py-4">
             {(error || Object.keys(fieldErrors).length > 0) && (
               <p className="text-xs text-red-400">
@@ -1229,7 +658,12 @@ export function EditChannelSheet({
               </p>
             )}
             <div className="ml-auto flex gap-2">
-              <Button type="button" variant="ghost" onClick={() => onOpenChange(false)} disabled={isPending}>
+              <Button
+                type="button"
+                variant="ghost"
+                onClick={() => onOpenChange(false)}
+                disabled={isPending}
+              >
                 Cancel
               </Button>
               <Button type="submit" disabled={isPending}>
diff --git a/k-tv-frontend/app/(main)/dashboard/components/logo-editor.tsx b/k-tv-frontend/app/(main)/dashboard/components/logo-editor.tsx
new file mode 100644
index 0000000..dd8c943
--- /dev/null
+++ b/k-tv-frontend/app/(main)/dashboard/components/logo-editor.tsx
@@ -0,0 +1,142 @@
+import { useRef } from "react";
+import { Button } from "@/components/ui/button";
+import type { LogoPosition } from "@/lib/types";
+
+const LOGO_POSITIONS: { value: LogoPosition; label: string }[] = [
+  { value: "top_right", label: "Top right" },
+  { value: "top_left", label: "Top left" },
+  { value: "bottom_right", label: "Bottom right" },
+  { value: "bottom_left", label: "Bottom left" },
+];
+
+interface LogoEditorProps {
+  logo: string | null;
+  logoPosition: LogoPosition;
+  logoOpacity: number;
+  onLogoChange: (logo: string | null) => void;
+  onPositionChange: (position: LogoPosition) => void;
+  onOpacityChange: (opacity: number) => void;
+}
+
+export function LogoEditor({
+  logo,
+  logoPosition,
+  logoOpacity,
+  onLogoChange,
+  onPositionChange,
+  onOpacityChange,
+}: LogoEditorProps) {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleFile = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    const reader = new FileReader();
+    reader.onload = (ev) => {
+      const result = ev.target?.result;
+      if (typeof result === "string") onLogoChange(result);
+    };
+    reader.readAsDataURL(file);
+    e.target.value = "";
+  };
+
+  return (
+    <div className="space-y-3 rounded-md border border-zinc-700/50 bg-zinc-800/50 p-3">
+      <div className="flex gap-2">
+        <Button
+          type="button"
+          variant="outline"
+          size="xs"
+          className="border-zinc-700 text-zinc-300 hover:text-zinc-100"
+          onClick={() => fileInputRef.current?.click()}
+        >
+          Upload image
+        </Button>
+        {logo && (
+          <Button
+            type="button"
+            variant="ghost"
+            size="xs"
+            className="text-zinc-500 hover:text-red-400"
+            onClick={() => onLogoChange(null)}
+          >
+            Clear
+          </Button>
+        )}
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept="image/*"
+          className="hidden"
+          onChange={handleFile}
+        />
+      </div>
+
+      <div className="space-y-1.5">
+        <label className="block text-xs font-medium text-zinc-400">
+          URL or SVG
+        </label>
+        <textarea
+          rows={2}
+          value={logo ?? ""}
+          onChange={(e) => onLogoChange(e.target.value || null)}
+          placeholder="https://example.com/logo.png or <svg>…</svg>"
+          className="w-full resize-none rounded-md border border-zinc-700 bg-zinc-800 px-3 py-2 text-xs text-zinc-100 placeholder:text-zinc-600 focus:border-zinc-500 focus:outline-none"
+        />
+      </div>
+
+      <div className="grid grid-cols-2 gap-3">
+        <div className="space-y-1.5">
+          <label className="block text-xs font-medium text-zinc-400">
+            Position
+          </label>
+          <select
+            value={logoPosition}
+            onChange={(e) => onPositionChange(e.target.value as LogoPosition)}
+            className="w-full rounded-md border border-zinc-700 bg-zinc-800 px-3 py-2 text-sm text-zinc-100 focus:border-zinc-500 focus:outline-none"
+          >
+            {LOGO_POSITIONS.map((p) => (
+              <option key={p.value} value={p.value}>
+                {p.label}
+              </option>
+            ))}
+          </select>
+        </div>
+
+        <div className="space-y-1.5">
+          <label className="block text-xs font-medium text-zinc-400">
+            Opacity ({logoOpacity}%)
+          </label>
+          <input
+            type="range"
+            min={0}
+            max={100}
+            value={logoOpacity}
+            onChange={(e) => onOpacityChange(Number(e.target.value))}
+            className="w-full accent-zinc-400"
+          />
+        </div>
+      </div>
+
+      {logo && (
+        <div className="flex items-center justify-center rounded-md border border-zinc-700/50 bg-zinc-900 p-2">
+          {logo.trimStart().startsWith("<") ? (
+            <div
+              dangerouslySetInnerHTML={{ __html: logo }}
+              className="h-10 w-auto"
+              style={{ opacity: logoOpacity / 100 }}
+            />
+          ) : (
+            // eslint-disable-next-line @next/next/no-img-element
+            <img
+              src={logo}
+              alt="Logo preview"
+              className="h-10 w-auto object-contain"
+              style={{ opacity: logoOpacity / 100 }}
+            />
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/k-tv-frontend/app/(main)/dashboard/components/recycle-policy-editor.tsx b/k-tv-frontend/app/(main)/dashboard/components/recycle-policy-editor.tsx
new file mode 100644
index 0000000..7b4279e
--- /dev/null
+++ b/k-tv-frontend/app/(main)/dashboard/components/recycle-policy-editor.tsx
@@ -0,0 +1,115 @@
+import type { RecyclePolicy } from "@/lib/types";
+import type { FieldErrors } from "@/lib/schemas";
+
+function NumberInput({
+  value,
+  onChange,
+  min,
+  max,
+  step,
+  placeholder,
+  error,
+}: {
+  value: number | "";
+  onChange: (v: number | "") => void;
+  min?: number;
+  max?: number;
+  step?: number | "any";
+  placeholder?: string;
+  error?: boolean;
+}) {
+  return (
+    <input
+      type="number"
+      min={min}
+      max={max}
+      step={step}
+      value={value}
+      placeholder={placeholder}
+      onChange={(e) =>
+        onChange(e.target.value === "" ? "" : Number(e.target.value))
+      }
+      className={`w-full rounded-md border bg-zinc-800 px-3 py-2 text-sm text-zinc-100 placeholder:text-zinc-600 focus:outline-none ${error ? "border-red-500 focus:border-red-400" : "border-zinc-700 focus:border-zinc-500"}`}
+    />
+  );
+}
+
+function Field({
+  label,
+  hint,
+  error,
+  children,
+}: {
+  label: string;
+  hint?: string;
+  error?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="space-y-1.5">
+      <label className="block text-xs font-medium text-zinc-400">{label}</label>
+      {children}
+      {error ? (
+        <p className="text-[11px] text-red-400">{error}</p>
+      ) : hint ? (
+        <p className="text-[11px] text-zinc-600">{hint}</p>
+      ) : null}
+    </div>
+  );
+}
+
+interface RecyclePolicyEditorProps {
+  policy: RecyclePolicy;
+  errors: FieldErrors;
+  onChange: (policy: RecyclePolicy) => void;
+}
+
+export function RecyclePolicyEditor({
+  policy,
+  errors,
+  onChange,
+}: RecyclePolicyEditorProps) {
+  return (
+    <div className="space-y-3">
+      <div className="grid grid-cols-2 gap-3">
+        <Field label="Cooldown (days)" hint="Don't replay within N days">
+          <NumberInput
+            value={policy.cooldown_days ?? ""}
+            onChange={(v) =>
+              onChange({ ...policy, cooldown_days: v === "" ? null : (v as number) })
+            }
+            min={0}
+            placeholder="7"
+          />
+        </Field>
+        <Field label="Cooldown (generations)" hint="Don't replay within N schedules">
+          <NumberInput
+            value={policy.cooldown_generations ?? ""}
+            onChange={(v) =>
+              onChange({ ...policy, cooldown_generations: v === "" ? null : (v as number) })
+            }
+            min={0}
+            placeholder="3"
+          />
+        </Field>
+      </div>
+      <Field
+        label="Min available ratio"
+        hint="0.0–1.0 · Fraction of the pool kept selectable even if cooldown is active"
+        error={errors["recycle_policy.min_available_ratio"]}
+      >
+        <NumberInput
+          value={policy.min_available_ratio}
+          onChange={(v) =>
+            onChange({ ...policy, min_available_ratio: v === "" ? 0.1 : (v as number) })
+          }
+          min={0}
+          max={1}
+          step={0.01}
+          placeholder="0.1"
+          error={!!errors["recycle_policy.min_available_ratio"]}
+        />
+      </Field>
+    </div>
+  );
+}
diff --git a/k-tv-frontend/app/(main)/dashboard/components/webhook-editor.tsx b/k-tv-frontend/app/(main)/dashboard/components/webhook-editor.tsx
new file mode 100644
index 0000000..9e22d07
--- /dev/null
+++ b/k-tv-frontend/app/(main)/dashboard/components/webhook-editor.tsx
@@ -0,0 +1,141 @@
+import type { WebhookFormat } from "@/hooks/use-channel-form";
+import { WEBHOOK_PRESETS } from "@/hooks/use-channel-form";
+
+function Field({
+  label,
+  hint,
+  children,
+}: {
+  label: string;
+  hint?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="space-y-1.5">
+      <label className="block text-xs font-medium text-zinc-400">{label}</label>
+      {children}
+      {hint && <p className="text-[11px] text-zinc-600">{hint}</p>}
+    </div>
+  );
+}
+
+interface WebhookEditorProps {
+  webhookUrl: string;
+  webhookPollInterval: number | "";
+  webhookFormat: WebhookFormat;
+  webhookBodyTemplate: string;
+  webhookHeaders: string;
+  onWebhookUrlChange: (v: string) => void;
+  onWebhookPollIntervalChange: (v: number | "") => void;
+  onWebhookFormatChange: (fmt: WebhookFormat) => void;
+  onWebhookBodyTemplateChange: (v: string) => void;
+  onWebhookHeadersChange: (v: string) => void;
+}
+
+export function WebhookEditor({
+  webhookUrl,
+  webhookPollInterval,
+  webhookFormat,
+  webhookBodyTemplate,
+  webhookHeaders,
+  onWebhookUrlChange,
+  onWebhookPollIntervalChange,
+  onWebhookFormatChange,
+  onWebhookBodyTemplateChange,
+  onWebhookHeadersChange,
+}: WebhookEditorProps) {
+  return (
+    <div className="space-y-3">
+      <Field label="Webhook URL" hint="POST events to this URL on broadcast changes">
+        <input
+          value={webhookUrl}
+          onChange={(e) => onWebhookUrlChange(e.target.value)}
+          placeholder="https://example.com/webhook"
+          className="w-full rounded-md border border-zinc-700 bg-zinc-800 px-3 py-2 text-sm text-zinc-100 placeholder:text-zinc-600 focus:border-zinc-500 focus:outline-none"
+        />
+      </Field>
+
+      {webhookUrl && (
+        <>
+          <Field
+            label="Poll interval (seconds)"
+            hint="How often to check for broadcast changes"
+          >
+            <input
+              type="number"
+              min={1}
+              value={webhookPollInterval}
+              placeholder="5"
+              onChange={(e) =>
+                onWebhookPollIntervalChange(
+                  e.target.value === "" ? "" : Number(e.target.value),
+                )
+              }
+              className="w-full rounded-md border border-zinc-700 bg-zinc-800 px-3 py-2 text-sm text-zinc-100 placeholder:text-zinc-600 focus:border-zinc-500 focus:outline-none"
+            />
+          </Field>
+
+          <div className="space-y-2">
+            <p className="text-xs text-zinc-400">Payload format</p>
+            <div className="flex flex-wrap gap-1.5">
+              {(["default", "discord", "slack", "custom"] as WebhookFormat[]).map(
+                (fmt) => (
+                  <button
+                    key={fmt}
+                    type="button"
+                    onClick={() => {
+                      onWebhookFormatChange(fmt);
+                      if (fmt === "discord")
+                        onWebhookBodyTemplateChange(WEBHOOK_PRESETS.discord);
+                      else if (fmt === "slack")
+                        onWebhookBodyTemplateChange(WEBHOOK_PRESETS.slack);
+                      else if (fmt === "default") onWebhookBodyTemplateChange("");
+                    }}
+                    className={`rounded px-2.5 py-1 text-xs font-medium capitalize transition-colors ${
+                      webhookFormat === fmt
+                        ? "bg-zinc-600 text-zinc-100"
+                        : "bg-zinc-800 text-zinc-400 hover:bg-zinc-700 hover:text-zinc-200"
+                    }`}
+                  >
+                    {fmt === "default" ? "K-TV default" : fmt}
+                  </button>
+                ),
+              )}
+            </div>
+          </div>
+
+          {webhookFormat !== "default" && (
+            <Field
+              label="Body template (Handlebars)"
+              hint="Context: event, timestamp, channel_id, data.item.title, data.item.duration_secs, …"
+            >
+              <textarea
+                rows={6}
+                value={webhookBodyTemplate}
+                onChange={(e) => {
+                  onWebhookBodyTemplateChange(e.target.value);
+                  onWebhookFormatChange("custom");
+                }}
+                placeholder={'{\n  "text": "Now playing: {{data.item.title}}"\n}'}
+                className="w-full resize-y rounded-md border border-zinc-700 bg-zinc-800 px-3 py-2 font-mono text-xs text-zinc-100 placeholder:text-zinc-600 focus:border-zinc-500 focus:outline-none"
+              />
+            </Field>
+          )}
+
+          <Field
+            label="Extra headers (JSON)"
+            hint={'e.g. {"Authorization": "Bearer token"}'}
+          >
+            <textarea
+              rows={2}
+              value={webhookHeaders}
+              onChange={(e) => onWebhookHeadersChange(e.target.value)}
+              placeholder={'{"Authorization": "Bearer xxx"}'}
+              className="w-full resize-none rounded-md border border-zinc-700 bg-zinc-800 px-3 py-2 font-mono text-xs text-zinc-100 placeholder:text-zinc-600 focus:border-zinc-500 focus:outline-none"
+            />
+          </Field>
+        </>
+      )}
+    </div>
+  );
+}
diff --git a/k-tv-frontend/app/(main)/dashboard/page.tsx b/k-tv-frontend/app/(main)/dashboard/page.tsx
index bc705c1..01c9684 100644
--- a/k-tv-frontend/app/(main)/dashboard/page.tsx
+++ b/k-tv-frontend/app/(main)/dashboard/page.tsx
@@ -1,8 +1,7 @@
 "use client";
 
-import { useState, useEffect } from "react";
-import { Plus, Upload, RefreshCw, Antenna, Settings2 } from "lucide-react";
-import { Button } from "@/components/ui/button";
+import { useState } from "react";
+import { toast } from "sonner";
 import {
   useChannels,
   useCreateChannel,
@@ -13,9 +12,11 @@ import {
 import { useAuthContext } from "@/context/auth-context";
 import { useConfig } from "@/hooks/use-config";
 import { useRescanLibrary } from "@/hooks/use-library";
-import { api } from "@/lib/api";
-import { toast } from "sonner";
-import { useQueryClient } from "@tanstack/react-query";
+import { useChannelOrder } from "@/hooks/use-channel-order";
+import { useImportChannel } from "@/hooks/use-import-channel";
+import { useRegenerateAllSchedules } from "@/hooks/use-regenerate-all";
+import { exportChannel } from "@/lib/channel-export";
+import { DashboardHeader } from "./components/dashboard-header";
 import { ChannelCard } from "./components/channel-card";
 import { CreateChannelDialog } from "./components/create-channel-dialog";
 import { DeleteChannelDialog } from "./components/delete-channel-dialog";
@@ -35,7 +36,6 @@ import type {
 
 export default function DashboardPage() {
   const { token } = useAuthContext();
-  const queryClient = useQueryClient();
   const { data: channels, isLoading, error } = useChannels();
   const { data: config } = useConfig();
   const capabilities = config?.provider_capabilities;
@@ -46,84 +46,18 @@ export default function DashboardPage() {
   const generateSchedule = useGenerateSchedule();
   const rescanLibrary = useRescanLibrary();
 
-  // Channel ordering — persisted to localStorage
-  const [channelOrder, setChannelOrder] = useState<string[]>([]);
-  useEffect(() => {
-    try {
-      const stored = localStorage.getItem("k-tv-channel-order");
-      if (stored) setChannelOrder(JSON.parse(stored));
-    } catch {}
-  }, []);
-
-  const saveOrder = (order: string[]) => {
-    setChannelOrder(order);
-    try {
-      localStorage.setItem("k-tv-channel-order", JSON.stringify(order));
-    } catch {}
-  };
-
-  // Sort channels by stored order; new channels appear at the end
-  const sortedChannels = channels
-    ? [...channels].sort((a, b) => {
-        const ai = channelOrder.indexOf(a.id);
-        const bi = channelOrder.indexOf(b.id);
-        if (ai === -1 && bi === -1) return 0;
-        if (ai === -1) return 1;
-        if (bi === -1) return -1;
-        return ai - bi;
-      })
-    : [];
-
-  const handleMoveUp = (channelId: string) => {
-    const ids = sortedChannels.map((c) => c.id);
-    const idx = ids.indexOf(channelId);
-    if (idx <= 0) return;
-    const next = [...ids];
-    [next[idx - 1], next[idx]] = [next[idx], next[idx - 1]];
-    saveOrder(next);
-  };
-
-  const handleMoveDown = (channelId: string) => {
-    const ids = sortedChannels.map((c) => c.id);
-    const idx = ids.indexOf(channelId);
-    if (idx === -1 || idx >= ids.length - 1) return;
-    const next = [...ids];
-    [next[idx], next[idx + 1]] = [next[idx + 1], next[idx]];
-    saveOrder(next);
-  };
-
-  // Regenerate all channels
-  const [isRegeneratingAll, setIsRegeneratingAll] = useState(false);
-  const handleRegenerateAll = async () => {
-    if (!token || !channels || channels.length === 0) return;
-    setIsRegeneratingAll(true);
-    let failed = 0;
-    for (const ch of channels) {
-      try {
-        await api.schedule.generate(ch.id, token);
-        queryClient.invalidateQueries({ queryKey: ["schedule", ch.id] });
-      } catch {
-        failed++;
-      }
-    }
-    setIsRegeneratingAll(false);
-    if (failed === 0)
-      toast.success(`All ${channels.length} schedules regenerated`);
-    else toast.error(`${failed} schedule(s) failed to generate`);
-  };
+  const { sortedChannels, handleMoveUp, handleMoveDown } = useChannelOrder(channels);
+  const { isRegeneratingAll, handleRegenerateAll } = useRegenerateAllSchedules(channels, token);
+  const importChannel = useImportChannel(token);
 
+  // Dialog state
   const [iptvOpen, setIptvOpen] = useState(false);
   const [transcodeOpen, setTranscodeOpen] = useState(false);
   const [createOpen, setCreateOpen] = useState(false);
   const [importOpen, setImportOpen] = useState(false);
-  const [importPending, setImportPending] = useState(false);
-  const [importError, setImportError] = useState<string | null>(null);
   const [editChannel, setEditChannel] = useState<ChannelResponse | null>(null);
-  const [deleteTarget, setDeleteTarget] = useState<ChannelResponse | null>(
-    null,
-  );
-  const [scheduleChannel, setScheduleChannel] =
-    useState<ChannelResponse | null>(null);
+  const [deleteTarget, setDeleteTarget] = useState<ChannelResponse | null>(null);
+  const [scheduleChannel, setScheduleChannel] = useState<ChannelResponse | null>(null);
 
   const handleCreate = (data: {
     name: string;
@@ -171,52 +105,8 @@ export default function DashboardPage() {
   };
 
   const handleImport = async (data: ChannelImportData) => {
-    if (!token) return;
-    setImportPending(true);
-    setImportError(null);
-    try {
-      const created = await api.channels.create(
-        {
-          name: data.name,
-          timezone: data.timezone,
-          description: data.description,
-        },
-        token,
-      );
-      await api.channels.update(
-        created.id,
-        {
-          schedule_config: { blocks: data.blocks },
-          recycle_policy: data.recycle_policy,
-        },
-        token,
-      );
-      await queryClient.invalidateQueries({ queryKey: ["channels"] });
-      setImportOpen(false);
-    } catch (e) {
-      setImportError(e instanceof Error ? e.message : "Import failed");
-    } finally {
-      setImportPending(false);
-    }
-  };
-
-  const handleExport = (channel: ChannelResponse) => {
-    const payload = {
-      name: channel.name,
-      description: channel.description ?? undefined,
-      timezone: channel.timezone,
-      blocks: channel.schedule_config.blocks,
-      recycle_policy: channel.recycle_policy,
-    };
-    const blob = new Blob([JSON.stringify(payload, null, 2)], {
-      type: "application/json",
-    });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement("a");
-    a.href = url;
-    a.download = `${channel.name.toLowerCase().replace(/\s+/g, "-")}.json`;
-    a.click();
-    URL.revokeObjectURL(url);
+    const ok = await importChannel.handleImport(data);
+    if (ok) setImportOpen(false);
   };
 
   const handleDelete = () => {
@@ -226,69 +116,32 @@ export default function DashboardPage() {
     });
   };
 
+  const canTranscode = !!config?.providers?.some((p) => p.capabilities.transcode);
+  const canRescan = !!capabilities?.rescan;
+
   return (
     <div className="mx-auto w-full max-w-5xl space-y-6 px-6 py-8">
-      {/* Header */}
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-xl font-semibold text-zinc-100">My Channels</h1>
-          <p className="mt-0.5 text-sm text-zinc-500">
-            Build your broadcast lineup
-          </p>
-        </div>
-        <div className="flex gap-2">
-          {config?.providers?.some((p) => p.capabilities.transcode) && (
-            <Button
-              onClick={() => setTranscodeOpen(true)}
-              title="Transcode settings"
-            >
-              <Settings2 className="size-4" />
-              Transcode
-            </Button>
-          )}
-          {capabilities?.rescan && (
-            <Button
-              onClick={() =>
-                rescanLibrary.mutate(undefined, {
-                  onSuccess: (d) => toast.success(`Rescan complete: ${d.items_found} files found`),
-                  onError: () => toast.error("Rescan failed"),
-                })
-              }
-              disabled={rescanLibrary.isPending}
-              title="Rescan local files directory"
-            >
-              <RefreshCw className={`size-4 ${rescanLibrary.isPending ? "animate-spin" : ""}`} />
-              Rescan library
-            </Button>
-          )}
-          {channels && channels.length > 0 && (
-            <Button
-              onClick={handleRegenerateAll}
-              disabled={isRegeneratingAll}
-              title="Regenerate schedules for all channels"
-            >
-              <RefreshCw
-                className={`size-4 ${isRegeneratingAll ? "animate-spin" : ""}`}
-              />
-              Regenerate all
-            </Button>
-          )}
-          <Button onClick={() => setIptvOpen(true)}>
-            <Antenna className="size-4" />
-            IPTV
-          </Button>
-          <Button onClick={() => setImportOpen(true)}>
-            <Upload className="size-4" />
-            Import
-          </Button>
-          <Button onClick={() => setCreateOpen(true)}>
-            <Plus className="size-4" />
-            New channel
-          </Button>
-        </div>
-      </div>
+      <DashboardHeader
+        hasChannels={!!channels && channels.length > 0}
+        canTranscode={canTranscode}
+        canRescan={canRescan}
+        isRegeneratingAll={isRegeneratingAll}
+        isRescanPending={rescanLibrary.isPending}
+        capabilities={capabilities}
+        onTranscodeOpen={() => setTranscodeOpen(true)}
+        onRescan={() =>
+          rescanLibrary.mutate(undefined, {
+            onSuccess: (d) =>
+              toast.success(`Rescan complete: ${d.items_found} files found`),
+            onError: () => toast.error("Rescan failed"),
+          })
+        }
+        onRegenerateAll={handleRegenerateAll}
+        onIptvOpen={() => setIptvOpen(true)}
+        onImportOpen={() => setImportOpen(true)}
+        onCreateOpen={() => setCreateOpen(true)}
+      />
 
-      {/* Content */}
       {isLoading && (
         <div className="flex items-center justify-center py-20">
           <div className="h-5 w-5 animate-spin rounded-full border-2 border-zinc-700 border-t-zinc-300" />
@@ -304,10 +157,12 @@ export default function DashboardPage() {
       {!isLoading && channels && channels.length === 0 && (
         <div className="flex flex-col items-center justify-center gap-3 rounded-xl border border-dashed border-zinc-800 py-20 text-center">
           <p className="text-sm text-zinc-500">No channels yet</p>
-          <Button onClick={() => setCreateOpen(true)}>
-            <Plus className="size-4" />
+          <button
+            onClick={() => setCreateOpen(true)}
+            className="inline-flex items-center gap-1.5 rounded-md border border-zinc-700 bg-zinc-800 px-3 py-1.5 text-sm text-zinc-300 transition-colors hover:bg-zinc-700 hover:text-zinc-100"
+          >
             Create your first channel
-          </Button>
+          </button>
         </div>
       )}
 
@@ -327,7 +182,7 @@ export default function DashboardPage() {
               onDelete={() => setDeleteTarget(channel)}
               onGenerateSchedule={() => generateSchedule.mutate(channel.id)}
               onViewSchedule={() => setScheduleChannel(channel)}
-              onExport={() => handleExport(channel)}
+              onExport={() => exportChannel(channel)}
               onMoveUp={() => handleMoveUp(channel.id)}
               onMoveDown={() => handleMoveDown(channel.id)}
             />
@@ -354,12 +209,12 @@ export default function DashboardPage() {
         onOpenChange={(open) => {
           if (!open) {
             setImportOpen(false);
-            setImportError(null);
+            importChannel.clearError();
           }
         }}
         onSubmit={handleImport}
-        isPending={importPending}
-        error={importError}
+        isPending={importChannel.isPending}
+        error={importChannel.error}
       />
 
       <CreateChannelDialog
diff --git a/k-tv-frontend/app/(main)/tv/components/autoplay-prompt.tsx b/k-tv-frontend/app/(main)/tv/components/autoplay-prompt.tsx
new file mode 100644
index 0000000..19fc736
--- /dev/null
+++ b/k-tv-frontend/app/(main)/tv/components/autoplay-prompt.tsx
@@ -0,0 +1,11 @@
+export function AutoplayPrompt() {
+  return (
+    <div className="pointer-events-none absolute inset-0 z-20 flex items-center justify-center">
+      <div className="rounded-xl bg-black/70 px-8 py-5 text-center backdrop-blur-sm">
+        <p className="text-sm font-medium text-zinc-200">
+          Click or move the mouse to play
+        </p>
+      </div>
+    </div>
+  );
+}
diff --git a/k-tv-frontend/app/(main)/tv/components/channel-number-overlay.tsx b/k-tv-frontend/app/(main)/tv/components/channel-number-overlay.tsx
new file mode 100644
index 0000000..afa1f8d
--- /dev/null
+++ b/k-tv-frontend/app/(main)/tv/components/channel-number-overlay.tsx
@@ -0,0 +1,15 @@
+interface ChannelNumberOverlayProps {
+  channelInput: string;
+}
+
+export function ChannelNumberOverlay({ channelInput }: ChannelNumberOverlayProps) {
+  if (!channelInput) return null;
+  return (
+    <div className="pointer-events-none absolute left-1/2 top-1/2 z-30 -translate-x-1/2 -translate-y-1/2 rounded-xl bg-black/80 px-8 py-5 text-center backdrop-blur">
+      <p className="mb-1 text-[10px] uppercase tracking-widest text-zinc-500">
+        Channel
+      </p>
+      <p className="font-mono text-5xl font-bold text-white">{channelInput}</p>
+    </div>
+  );
+}
diff --git a/k-tv-frontend/app/(main)/tv/components/index.ts b/k-tv-frontend/app/(main)/tv/components/index.ts
index 9e6e6df..2bbee66 100644
--- a/k-tv-frontend/app/(main)/tv/components/index.ts
+++ b/k-tv-frontend/app/(main)/tv/components/index.ts
@@ -18,3 +18,12 @@ export { NoSignal } from "./no-signal";
 export type { NoSignalProps, NoSignalVariant } from "./no-signal";
 
 export { ChannelPasswordModal } from "./channel-password-modal";
+
+export { SubtitlePicker } from "./subtitle-picker";
+export { VolumeControl } from "./volume-control";
+export { QualityPicker } from "./quality-picker";
+export { TopControlBar } from "./top-control-bar";
+export { LogoWatermark } from "./logo-watermark";
+export { AutoplayPrompt } from "./autoplay-prompt";
+export { ChannelNumberOverlay } from "./channel-number-overlay";
+export { TvBaseLayer } from "./tv-base-layer";
diff --git a/k-tv-frontend/app/(main)/tv/components/logo-watermark.tsx b/k-tv-frontend/app/(main)/tv/components/logo-watermark.tsx
new file mode 100644
index 0000000..b586ed3
--- /dev/null
+++ b/k-tv-frontend/app/(main)/tv/components/logo-watermark.tsx
@@ -0,0 +1,39 @@
+import type { LogoPosition } from "@/lib/types";
+
+function logoPositionClass(pos?: LogoPosition) {
+  switch (pos) {
+    case "top_left":
+      return "top-0 left-0";
+    case "bottom_left":
+      return "bottom-0 left-0";
+    case "bottom_right":
+      return "bottom-0 right-0";
+    default:
+      return "top-0 right-0";
+  }
+}
+
+interface LogoWatermarkProps {
+  logo: string;
+  position?: LogoPosition;
+  opacity?: number;
+}
+
+export function LogoWatermark({ logo, position, opacity = 1 }: LogoWatermarkProps) {
+  return (
+    <div
+      className={`pointer-events-none absolute z-10 p-3 ${logoPositionClass(position)}`}
+      style={{ opacity }}
+    >
+      {logo.trimStart().startsWith("<") ? (
+        <div
+          dangerouslySetInnerHTML={{ __html: logo }}
+          className="h-12 w-auto"
+        />
+      ) : (
+        // eslint-disable-next-line @next/next/no-img-element
+        <img src={logo} alt="" className="h-12 w-auto object-contain" />
+      )}
+    </div>
+  );
+}
diff --git a/k-tv-frontend/app/(main)/tv/components/quality-picker.tsx b/k-tv-frontend/app/(main)/tv/components/quality-picker.tsx
new file mode 100644
index 0000000..72e7baf
--- /dev/null
+++ b/k-tv-frontend/app/(main)/tv/components/quality-picker.tsx
@@ -0,0 +1,40 @@
+interface QualityPickerProps {
+  quality: string;
+  options: { value: string; label: string }[];
+  showPicker: boolean;
+  onToggle: () => void;
+  onChangeQuality: (q: string) => void;
+}
+
+export function QualityPicker({
+  quality,
+  options,
+  showPicker,
+  onToggle,
+  onChangeQuality,
+}: QualityPickerProps) {
+  return (
+    <div className="pointer-events-auto relative">
+      <button
+        className="rounded-md bg-black/50 px-3 py-1.5 text-xs text-zinc-400 backdrop-blur transition-colors hover:bg-black/70 hover:text-white"
+        onClick={onToggle}
+        title="Stream quality"
+      >
+        {options.find((o) => o.value === quality)?.label ?? quality}
+      </button>
+      {showPicker && (
+        <div className="absolute right-0 top-9 z-30 min-w-[8rem] overflow-hidden rounded-md border border-zinc-700 bg-zinc-900/95 py-1 shadow-xl backdrop-blur">
+          {options.map((opt) => (
+            <button
+              key={opt.value}
+              className={`w-full px-3 py-1.5 text-left text-xs transition-colors hover:bg-zinc-700 ${quality === opt.value ? "text-white" : "text-zinc-400"}`}
+              onClick={() => onChangeQuality(opt.value)}
+            >
+              {opt.label}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/k-tv-frontend/app/(main)/tv/components/subtitle-picker.tsx b/k-tv-frontend/app/(main)/tv/components/subtitle-picker.tsx
new file mode 100644
index 0000000..af93106
--- /dev/null
+++ b/k-tv-frontend/app/(main)/tv/components/subtitle-picker.tsx
@@ -0,0 +1,53 @@
+import type { SubtitleTrack } from "./video-player";
+
+interface SubtitlePickerProps {
+  tracks: SubtitleTrack[];
+  activeTrack: number;
+  show: boolean;
+  onToggle: () => void;
+  onChangeTrack: (id: number) => void;
+}
+
+export function SubtitlePicker({
+  tracks,
+  activeTrack,
+  show,
+  onToggle,
+  onChangeTrack,
+}: SubtitlePickerProps) {
+  if (tracks.length === 0) return null;
+  return (
+    <div className="pointer-events-auto relative">
+      <button
+        className="rounded-md bg-black/50 px-3 py-1.5 text-xs backdrop-blur transition-colors hover:bg-black/70 hover:text-white"
+        style={{
+          color: activeTrack !== -1 ? "white" : undefined,
+          borderBottom:
+            activeTrack !== -1 ? "2px solid white" : "2px solid transparent",
+        }}
+        onClick={onToggle}
+      >
+        CC
+      </button>
+      {show && (
+        <div className="absolute right-0 top-9 z-30 min-w-[10rem] overflow-hidden rounded-md border border-zinc-700 bg-zinc-900/95 py-1 shadow-xl backdrop-blur">
+          <button
+            className={`w-full px-3 py-1.5 text-left text-xs transition-colors hover:bg-zinc-700 ${activeTrack === -1 ? "text-white" : "text-zinc-400"}`}
+            onClick={() => onChangeTrack(-1)}
+          >
+            Off
+          </button>
+          {tracks.map((track) => (
+            <button
+              key={track.id}
+              className={`w-full px-3 py-1.5 text-left text-xs transition-colors hover:bg-zinc-700 ${activeTrack === track.id ? "text-white" : "text-zinc-400"}`}
+              onClick={() => onChangeTrack(track.id)}
+            >
+              {track.name || track.lang || `Track ${track.id + 1}`}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/k-tv-frontend/app/(main)/tv/components/top-control-bar.tsx b/k-tv-frontend/app/(main)/tv/components/top-control-bar.tsx
new file mode 100644
index 0000000..f1b9c93
--- /dev/null
+++ b/k-tv-frontend/app/(main)/tv/components/top-control-bar.tsx
@@ -0,0 +1,156 @@
+import { Cast, Info, Maximize2, Minimize2 } from "lucide-react";
+import type { LucideIcon } from "lucide-react";
+import { SubtitlePicker } from "./subtitle-picker";
+import { VolumeControl } from "./volume-control";
+import { QualityPicker } from "./quality-picker";
+import type { SubtitleTrack } from "./video-player";
+
+interface TopControlBarProps {
+  // Subtitles
+  subtitleTracks: SubtitleTrack[];
+  activeSubtitleTrack: number;
+  showSubtitlePicker: boolean;
+  onToggleSubtitlePicker: () => void;
+  onChangeSubtitleTrack: (id: number) => void;
+  // Volume
+  volume: number;
+  isMuted: boolean;
+  VolumeIcon: LucideIcon;
+  showVolumeSlider: boolean;
+  onToggleVolumeSlider: () => void;
+  onToggleMute: () => void;
+  onVolumeChange: (v: number) => void;
+  // Fullscreen
+  isFullscreen: boolean;
+  onToggleFullscreen: () => void;
+  // Cast
+  castAvailable: boolean;
+  isCasting: boolean;
+  castDeviceName?: string | null;
+  streamUrl?: string | null;
+  onRequestCast: (url: string) => void;
+  onStopCasting: () => void;
+  // Quality
+  quality: string;
+  qualityOptions: { value: string; label: string }[];
+  showQualityPicker: boolean;
+  onToggleQualityPicker: () => void;
+  onChangeQuality: (q: string) => void;
+  // Stats & guide
+  showStats: boolean;
+  onToggleStats: () => void;
+  showSchedule: boolean;
+  onToggleSchedule: () => void;
+}
+
+export function TopControlBar({
+  subtitleTracks,
+  activeSubtitleTrack,
+  showSubtitlePicker,
+  onToggleSubtitlePicker,
+  onChangeSubtitleTrack,
+  volume,
+  isMuted,
+  VolumeIcon,
+  showVolumeSlider,
+  onToggleVolumeSlider,
+  onToggleMute,
+  onVolumeChange,
+  isFullscreen,
+  onToggleFullscreen,
+  castAvailable,
+  isCasting,
+  castDeviceName,
+  streamUrl,
+  onRequestCast,
+  onStopCasting,
+  quality,
+  qualityOptions,
+  showQualityPicker,
+  onToggleQualityPicker,
+  onChangeQuality,
+  showStats,
+  onToggleStats,
+  showSchedule,
+  onToggleSchedule,
+}: TopControlBarProps) {
+  return (
+    <div className="flex justify-end gap-2 p-4">
+      <SubtitlePicker
+        tracks={subtitleTracks}
+        activeTrack={activeSubtitleTrack}
+        show={showSubtitlePicker}
+        onToggle={onToggleSubtitlePicker}
+        onChangeTrack={(id) => {
+          onChangeSubtitleTrack(id);
+          if (id !== activeSubtitleTrack) onToggleSubtitlePicker();
+        }}
+      />
+
+      <VolumeControl
+        volume={volume}
+        isMuted={isMuted}
+        VolumeIcon={VolumeIcon}
+        showSlider={showVolumeSlider}
+        onToggleSlider={onToggleVolumeSlider}
+        onToggleMute={onToggleMute}
+        onVolumeChange={(v) => {
+          onVolumeChange(v);
+        }}
+      />
+
+      <button
+        className="pointer-events-auto rounded-md bg-black/50 p-1.5 text-zinc-400 backdrop-blur transition-colors hover:bg-black/70 hover:text-white"
+        onClick={onToggleFullscreen}
+        title={isFullscreen ? "Exit fullscreen [F]" : "Fullscreen [F]"}
+      >
+        {isFullscreen ? (
+          <Minimize2 className="h-4 w-4" />
+        ) : (
+          <Maximize2 className="h-4 w-4" />
+        )}
+      </button>
+
+      {castAvailable && (
+        <button
+          className={`pointer-events-auto rounded-md bg-black/50 p-1.5 backdrop-blur transition-colors hover:bg-black/70 hover:text-white ${
+            isCasting ? "text-blue-400" : "text-zinc-400"
+          }`}
+          onClick={() =>
+            isCasting ? onStopCasting() : streamUrl && onRequestCast(streamUrl)
+          }
+          title={
+            isCasting
+              ? `Stop casting to ${castDeviceName ?? "TV"}`
+              : "Cast to TV"
+          }
+        >
+          <Cast className="h-4 w-4" />
+        </button>
+      )}
+
+      <QualityPicker
+        quality={quality}
+        options={qualityOptions}
+        showPicker={showQualityPicker}
+        onToggle={onToggleQualityPicker}
+        onChangeQuality={onChangeQuality}
+      />
+
+      <button
+        className={`pointer-events-auto rounded-md bg-black/50 p-1.5 backdrop-blur transition-colors hover:bg-black/70 hover:text-white ${showStats ? "text-violet-400" : "text-zinc-400"}`}
+        onClick={onToggleStats}
+        title="Stats for nerds [S]"
+      >
+        <Info className="h-4 w-4" />
+      </button>
+
+      <button
+        className="pointer-events-auto rounded-md bg-black/50 px-3 py-1.5 text-xs text-zinc-400 backdrop-blur transition-colors hover:bg-black/70 hover:text-white"
+        onClick={onToggleSchedule}
+      >
+        {showSchedule ? "Hide guide" : "Guide [G]"}
+      </button>
+    </div>
+  );
+}
diff --git a/k-tv-frontend/app/(main)/tv/components/tv-base-layer.tsx b/k-tv-frontend/app/(main)/tv/components/tv-base-layer.tsx
new file mode 100644
index 0000000..f667c4c
--- /dev/null
+++ b/k-tv-frontend/app/(main)/tv/components/tv-base-layer.tsx
@@ -0,0 +1,140 @@
+import { RefObject } from "react";
+import type { CurrentBroadcastResponse } from "@/lib/types";
+import { VideoPlayer } from "./video-player";
+import { NoSignal } from "./no-signal";
+import { calcOffsetSecs } from "@/hooks/use-tv";
+import type { SubtitleTrack } from "./video-player";
+
+interface TvBaseLayerProps {
+  isLoadingChannels: boolean;
+  hasChannels: boolean;
+  broadcastError: unknown;
+  isLoadingBroadcast: boolean;
+  hasBroadcast: boolean;
+  streamUrlError: unknown;
+  streamError: boolean;
+  videoEnded: boolean;
+  streamUrl?: string | null;
+  broadcast?: CurrentBroadcastResponse | null;
+  activeSubtitleTrack: number;
+  isMuted: boolean;
+  showStats: boolean;
+  videoRef: RefObject<HTMLVideoElement | null>;
+  onSubtitleTracksChange: (tracks: SubtitleTrack[]) => void;
+  onStreamError: () => void;
+  onEnded: () => void;
+  onNeedsInteraction: () => void;
+  onRetry: () => void;
+}
+
+export function TvBaseLayer({
+  isLoadingChannels,
+  hasChannels,
+  broadcastError,
+  isLoadingBroadcast,
+  hasBroadcast,
+  streamUrlError,
+  streamError,
+  videoEnded,
+  streamUrl,
+  broadcast,
+  activeSubtitleTrack,
+  isMuted,
+  showStats,
+  videoRef,
+  onSubtitleTracksChange,
+  onStreamError,
+  onEnded,
+  onNeedsInteraction,
+  onRetry,
+}: TvBaseLayerProps) {
+  if (isLoadingChannels) {
+    return <NoSignal variant="loading" message="Tuning in…" />;
+  }
+  if (!hasChannels) {
+    return (
+      <NoSignal
+        variant="no-signal"
+        message="No channels configured. Visit the Dashboard to create one."
+      />
+    );
+  }
+
+  const broadcastErrMsg = (broadcastError as Error)?.message;
+  if (broadcastErrMsg === "auth_required") {
+    return (
+      <NoSignal variant="locked" message="Sign in to watch this channel." />
+    );
+  }
+  if (
+    broadcastErrMsg &&
+    broadcastError &&
+    (broadcastError as { status?: number }).status === 403
+  ) {
+    return (
+      <NoSignal variant="locked" message="This channel is owner-only." />
+    );
+  }
+
+  if (isLoadingBroadcast) {
+    return <NoSignal variant="loading" message="Tuning in…" />;
+  }
+  if (!hasBroadcast) {
+    return (
+      <NoSignal
+        variant="no-signal"
+        message="Nothing is scheduled right now. Check back later."
+      />
+    );
+  }
+
+  const streamErrMsg = (streamUrlError as Error)?.message;
+  if (streamErrMsg === "auth_required") {
+    return (
+      <NoSignal variant="locked" message="Sign in to watch this block." />
+    );
+  }
+  if (
+    streamUrlError &&
+    (streamUrlError as { status?: number }).status === 403
+  ) {
+    return <NoSignal variant="locked" message="This block is owner-only." />;
+  }
+
+  if (streamError) {
+    return (
+      <NoSignal variant="error" message="Stream failed to load.">
+        <button
+          onClick={onRetry}
+          className="mt-2 rounded-md border border-zinc-700 bg-zinc-800/80 px-4 py-2 text-xs text-zinc-300 transition-colors hover:bg-zinc-700 hover:text-zinc-100"
+        >
+          Retry
+        </button>
+      </NoSignal>
+    );
+  }
+  if (videoEnded) {
+    return <NoSignal variant="loading" message="Up next, stay tuned…" />;
+  }
+  if (streamUrl) {
+    return (
+      <VideoPlayer
+        ref={videoRef}
+        src={streamUrl}
+        className="absolute inset-0 h-full w-full"
+        initialOffset={
+          broadcast ? calcOffsetSecs(broadcast.slot.start_at) : 0
+        }
+        subtitleTrack={activeSubtitleTrack}
+        muted={isMuted}
+        showStats={showStats}
+        broadcast={broadcast ?? undefined}
+        onSubtitleTracksChange={onSubtitleTracksChange}
+        onStreamError={onStreamError}
+        onEnded={onEnded}
+        onNeedsInteraction={onNeedsInteraction}
+      />
+    );
+  }
+  return <NoSignal variant="loading" message="Loading stream…" />;
+}
diff --git a/k-tv-frontend/app/(main)/tv/components/volume-control.tsx b/k-tv-frontend/app/(main)/tv/components/volume-control.tsx
new file mode 100644
index 0000000..31436c8
--- /dev/null
+++ b/k-tv-frontend/app/(main)/tv/components/volume-control.tsx
@@ -0,0 +1,59 @@
+import type { LucideIcon } from "lucide-react";
+
+interface VolumeControlProps {
+  volume: number;
+  isMuted: boolean;
+  VolumeIcon: LucideIcon;
+  showSlider: boolean;
+  onToggleSlider: () => void;
+  onToggleMute: () => void;
+  onVolumeChange: (v: number) => void;
+}
+
+export function VolumeControl({
+  volume,
+  isMuted,
+  VolumeIcon,
+  showSlider,
+  onToggleSlider,
+  onToggleMute,
+  onVolumeChange,
+}: VolumeControlProps) {
+  return (
+    <div className="pointer-events-auto relative">
+      <button
+        className="rounded-md bg-black/50 p-1.5 text-zinc-400 backdrop-blur transition-colors hover:bg-black/70 hover:text-white"
+        onClick={onToggleSlider}
+        title="Volume"
+      >
+        <VolumeIcon className="h-4 w-4" />
+      </button>
+      {showSlider && (
+        <div className="absolute right-0 top-9 z-30 w-36 rounded-lg border border-zinc-700 bg-zinc-900/95 p-3 shadow-xl backdrop-blur">
+          <input
+            type="range"
+            min={0}
+            max={100}
+            value={isMuted ? 0 : Math.round(volume * 100)}
+            onChange={(e) => {
+              const v = Number(e.target.value) / 100;
+              onVolumeChange(v);
+            }}
+            className="w-full accent-white"
+          />
+          <div className="mt-1.5 flex items-center justify-between">
+            <button
+              onClick={onToggleMute}
+              className="text-[10px] text-zinc-500 hover:text-zinc-300"
+            >
+              {isMuted ? "Unmute [M]" : "Mute [M]"}
+            </button>
+            <span className="font-mono text-[10px] text-zinc-500">
+              {isMuted ? "0" : Math.round(volume * 100)}%
+            </span>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/k-tv-frontend/app/(main)/tv/page.tsx b/k-tv-frontend/app/(main)/tv/page.tsx
index 4b0c126..e298649 100644
--- a/k-tv-frontend/app/(main)/tv/page.tsx
+++ b/k-tv-frontend/app/(main)/tv/page.tsx
@@ -4,25 +4,17 @@ import { useState, useEffect, useCallback, useRef, Suspense } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
 import { useQueryClient } from "@tanstack/react-query";
 import {
-  VideoPlayer,
   ChannelInfo,
   ChannelControls,
   ScheduleOverlay,
   UpNextBanner,
-  NoSignal,
   ChannelPasswordModal,
+  TopControlBar,
+  LogoWatermark,
+  AutoplayPrompt,
+  ChannelNumberOverlay,
+  TvBaseLayer,
 } from "./components";
-import type { SubtitleTrack } from "./components/video-player";
-import type { LogoPosition } from "@/lib/types";
-import {
-  Cast,
-  Info,
-  Maximize2,
-  Minimize2,
-  Volume1,
-  Volume2,
-  VolumeX,
-} from "lucide-react";
 import { useAuthContext } from "@/context/auth-context";
 import { useChannels, useCurrentBroadcast, useEpg } from "@/hooks/use-channels";
 import { useCast } from "@/hooks/use-cast";
@@ -30,35 +22,21 @@ import {
   useStreamUrl,
   fmtTime,
   calcProgress,
-  calcOffsetSecs,
   minutesUntil,
   toScheduleSlots,
   findNextSlot,
 } from "@/hooks/use-tv";
-
-// ---------------------------------------------------------------------------
-// Constants
-// ---------------------------------------------------------------------------
+import { useFullscreen } from "@/hooks/use-fullscreen";
+import { useIdle } from "@/hooks/use-idle";
+import { useVolume } from "@/hooks/use-volume";
+import { useQuality, QUALITY_OPTIONS } from "@/hooks/use-quality";
+import { useSubtitlePicker } from "@/hooks/use-subtitles";
+import { useChannelInput } from "@/hooks/use-channel-input";
+import { useChannelPasswords } from "@/hooks/use-channel-passwords";
+import { useTvKeyboard } from "@/hooks/use-tv-keyboard";
 
 const IDLE_TIMEOUT_MS = 3500;
-const BANNER_THRESHOLD = 80; // show "up next" when progress ≥ this %
-
-function logoPositionClass(pos?: LogoPosition) {
-  switch (pos) {
-    case "top_left":
-      return "top-0 left-0";
-    case "bottom_left":
-      return "bottom-0 left-0";
-    case "bottom_right":
-      return "bottom-0 right-0";
-    default:
-      return "top-0 right-0";
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Page
-// ---------------------------------------------------------------------------
+const BANNER_THRESHOLD = 80;
 
 export default function TvPage() {
   return (
@@ -72,24 +50,17 @@ function TvPageContent() {
   const { token } = useAuthContext();
   const router = useRouter();
   const searchParams = useSearchParams();
+  const queryClient = useQueryClient();
 
-  // Channel list
   const { data: channels, isLoading: isLoadingChannels } = useChannels();
 
-  // URL is the single source of truth for the active channel.
-  // channelIdx is derived — never stored in state.
   const channelId = searchParams.get("channel");
   const channelIdx =
     channels && channelId
-      ? Math.max(
-          0,
-          channels.findIndex((c) => c.id === channelId),
-        )
+      ? Math.max(0, channels.findIndex((c) => c.id === channelId))
       : 0;
   const channel = channels?.[channelIdx];
 
-  // Write a channel switch back to the URL so keyboard, buttons, and
-  // guide links all stay in sync and the page is bookmarkable/refreshable.
   const switchChannel = useCallback(
     (idx: number, list = channels) => {
       const target = list?.[idx];
@@ -99,280 +70,70 @@ function TvPageContent() {
     [channels, router],
   );
 
-  // Overlay / idle state
-  const [showOverlays, setShowOverlays] = useState(true);
   const [showSchedule, setShowSchedule] = useState(false);
   const [showStats, setShowStats] = useState(false);
-  const idleTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  // Video ref — used to resume playback if autoplay was blocked on load
-  const videoRef = useRef<HTMLVideoElement>(null);
-
-  // Access control — persisted per channel in localStorage
-  const [channelPasswords, setChannelPasswords] = useState<
-    Record<string, string>
-  >(() => {
-    try {
-      return JSON.parse(localStorage.getItem("channel_passwords") ?? "{}");
-    } catch {
-      return {};
-    }
-  });
-  const [blockPasswords, setBlockPasswords] = useState<Record<string, string>>(
-    () => {
-      try {
-        return JSON.parse(localStorage.getItem("block_passwords") ?? "{}");
-      } catch {
-        return {};
-      }
-    },
-  );
-  const [showChannelPasswordModal, setShowChannelPasswordModal] =
-    useState(false);
-  const [showBlockPasswordModal, setShowBlockPasswordModal] = useState(false);
-
-  const channelPassword = channel ? channelPasswords[channel.id] : undefined;
-
-  // Stream error recovery
   const [streamError, setStreamError] = useState(false);
-
-  // When the video ends, show no-signal until the next broadcast is detected.
   const [videoEnded, setVideoEnded] = useState(false);
 
-  // Autoplay blocked by browser — cleared on first interaction via resetIdle
-  const [needsInteraction, setNeedsInteraction] = useState(false);
-
-  // Subtitles
-  const [subtitleTracks, setSubtitleTracks] = useState<SubtitleTrack[]>([]);
-  const [activeSubtitleTrack, setActiveSubtitleTrack] = useState(-1);
-  const [showSubtitlePicker, setShowSubtitlePicker] = useState(false);
-
-  // Quality
-  const [quality, setQuality] = useState<string>(() => {
-    try {
-      return localStorage.getItem("quality") ?? "direct";
-    } catch {
-      return "direct";
-    }
-  });
-  const [showQualityPicker, setShowQualityPicker] = useState(false);
-
-  const QUALITY_OPTIONS = [
-    { value: "direct", label: "Auto" },
-    { value: "40000000", label: "40 Mbps" },
-    { value: "8000000", label: "8 Mbps" },
-    { value: "2000000", label: "2 Mbps" },
-  ];
-
-  // Fullscreen
-  const [isFullscreen, setIsFullscreen] = useState(false);
-  useEffect(() => {
-    const handler = () => setIsFullscreen(!!document.fullscreenElement);
-    document.addEventListener("fullscreenchange", handler);
-    return () => document.removeEventListener("fullscreenchange", handler);
-  }, []);
-
-  // Hide the shared nav bar in fullscreen; reveal it when overlays are shown
-  // (mouse move / key press). Classes are cleaned up on unmount.
-  useEffect(() => {
-    document.body.classList.toggle("tv-fullscreen", isFullscreen);
-    document.body.classList.toggle("tv-overlays", isFullscreen && showOverlays);
-    return () => document.body.classList.remove("tv-fullscreen", "tv-overlays");
-  }, [isFullscreen, showOverlays]);
-
-  const toggleFullscreen = useCallback(() => {
-    // Standard Fullscreen API (Chrome, Firefox, Safari desktop)
-    if (document.fullscreenEnabled) {
-      if (!document.fullscreenElement) {
-        document.documentElement.requestFullscreen().catch(() => {});
-      } else {
-        document.exitFullscreen().catch(() => {});
-      }
-      return;
-    }
-    // iOS Safari: requestFullscreen is not supported. Fall back to the video
-    // element's proprietary webkit API instead.
-    const video = videoRef.current as HTMLVideoElement & {
-      webkitEnterFullscreen?: () => void;
-      webkitExitFullscreen?: () => void;
-      webkitDisplayingFullscreen?: boolean;
-    };
-    if (!video?.webkitEnterFullscreen) return;
-    if (video.webkitDisplayingFullscreen) {
-      video.webkitExitFullscreen?.();
-    } else {
-      video.webkitEnterFullscreen();
-    }
-  }, []);
-
-  // Volume control
-  const [volume, setVolume] = useState(1); // 0.0 – 1.0
-  const [isMuted, setIsMuted] = useState(false);
-  const [showVolumeSlider, setShowVolumeSlider] = useState(false);
-  useEffect(() => {
-    if (!videoRef.current) return;
-    videoRef.current.muted = isMuted;
-    videoRef.current.volume = volume;
-  }, [isMuted, volume]);
-  const toggleMute = useCallback(() => setIsMuted((m) => !m), []);
-  const VolumeIcon =
-    isMuted || volume === 0 ? VolumeX : volume < 0.5 ? Volume1 : Volume2;
-
-  const { castAvailable, isCasting, castDeviceName, requestCast, stopCasting } =
-    useCast();
-
-  // Auto-mute local video while casting, restore on cast end
-  const prevMutedRef = useRef(false);
-  useEffect(() => {
-    if (isCasting) {
-      prevMutedRef.current = isMuted;
-      setIsMuted(true);
-    } else {
-      setIsMuted(prevMutedRef.current);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isCasting]);
-
-  // Channel jump by number (e.g. press "1","4" → jump to ch 14 after 1.5 s)
-  const [channelInput, setChannelInput] = useState("");
-  const channelInputTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  // Touch-swipe state
+  const videoRef = useRef<HTMLVideoElement>(null);
   const touchStartY = useRef<number | null>(null);
 
-  const queryClient = useQueryClient();
+  const { castAvailable, isCasting, castDeviceName, requestCast, stopCasting } = useCast();
 
-  // Tick for live progress calculation (every 30 s is fine for the progress bar)
-  const [, setTick] = useState(0);
-  useEffect(() => {
-    const id = setInterval(() => setTick((n) => n + 1), 30_000);
-    return () => clearInterval(id);
-  }, []);
+  // passwords: channelPassword depends only on channelId (from localStorage), safe to call before broadcast
+  const passwords = useChannelPasswords(channel?.id);
 
-  // Per-channel data
   const {
     data: broadcast,
     isLoading: isLoadingBroadcast,
     error: broadcastError,
-  } = useCurrentBroadcast(channel?.id ?? "", channelPassword);
-  const blockPassword = broadcast?.slot.id
-    ? blockPasswords[broadcast.slot.id]
-    : undefined;
+  } = useCurrentBroadcast(channel?.id ?? "", passwords.channelPassword);
+
+  // blockPassword derived from broadcast.slot.id after broadcast loads
+  const blockPassword = passwords.getBlockPassword(broadcast?.slot.id);
+
   const { data: epgSlots } = useEpg(
     channel?.id ?? "",
     undefined,
     undefined,
-    channelPassword,
+    passwords.channelPassword,
   );
+
+  const quality = useQuality(channel?.id, broadcast?.slot.id);
+  const volume = useVolume(videoRef, isCasting);
+  const subtitles = useSubtitlePicker(channelIdx, broadcast?.slot.id);
+
   const { data: streamUrl, error: streamUrlError } = useStreamUrl(
     channel?.id,
     token,
     broadcast?.slot.id,
-    channelPassword,
+    passwords.channelPassword,
     blockPassword,
-    quality,
+    quality.quality,
   );
 
-  const changeQuality = useCallback(
-    (q: string) => {
-      setQuality(q);
-      try {
-        localStorage.setItem("quality", q);
-      } catch {}
-      setShowQualityPicker(false);
-      queryClient.invalidateQueries({
-        queryKey: ["stream-url", channel?.id, broadcast?.slot.id],
-      });
-    },
-    [queryClient, channel?.id, broadcast?.slot.id],
-  );
-
-  // iOS Safari: track fullscreen state via webkit video element events.
-  // Re-run when streamUrl changes so we catch the video element after it mounts.
-  useEffect(() => {
-    const video = videoRef.current;
-    if (!video) return;
-    const onBegin = () => setIsFullscreen(true);
-    const onEnd = () => setIsFullscreen(false);
-    video.addEventListener("webkitbeginfullscreen", onBegin);
-    video.addEventListener("webkitendfullscreen", onEnd);
-    return () => {
-      video.removeEventListener("webkitbeginfullscreen", onBegin);
-      video.removeEventListener("webkitendfullscreen", onEnd);
-    };
-  }, [streamUrl]);
-
-  // Show channel password modal when broadcast returns password_required
-  useEffect(() => {
-    if ((broadcastError as Error)?.message === "password_required") {
-      setShowChannelPasswordModal(true);
-    }
-  }, [broadcastError]);
-
-  // Show block password modal when stream URL fetch returns password_required
-  useEffect(() => {
-    if ((streamUrlError as Error)?.message === "password_required") {
-      setShowBlockPasswordModal(true);
-    }
-  }, [streamUrlError]);
-
-  // Clear transient states when a new slot is detected
-  useEffect(() => {
-    setStreamError(false);
-    setVideoEnded(false);
-  }, [broadcast?.slot.id]);
-
-  // Reset subtitle state when channel or slot changes
-  useEffect(() => {
-    setSubtitleTracks([]);
-    setActiveSubtitleTrack(-1);
-    setShowSubtitlePicker(false);
-  }, [channelIdx, broadcast?.slot.id]);
-
-  // ------------------------------------------------------------------
-  // Derived display values
-  // ------------------------------------------------------------------
-
-  const hasBroadcast = !!broadcast;
-  const progress = hasBroadcast
-    ? calcProgress(broadcast.slot.start_at, broadcast.slot.item.duration_secs)
-    : 0;
-
-  const scheduleSlots = toScheduleSlots(epgSlots ?? [], broadcast?.slot.id);
-  const nextSlot = findNextSlot(epgSlots ?? [], broadcast?.slot.id);
-  const showBanner = hasBroadcast && progress >= BANNER_THRESHOLD && !!nextSlot;
-
-  // ------------------------------------------------------------------
-  // Idle detection
-  // ------------------------------------------------------------------
-
-  const resetIdle = useCallback(() => {
-    setShowOverlays(true);
-    setNeedsInteraction(false);
-    if (idleTimer.current) clearTimeout(idleTimer.current);
-    idleTimer.current = setTimeout(() => {
-      setShowOverlays(false);
-      setShowVolumeSlider(false);
-      setShowSubtitlePicker(false);
-      setShowQualityPicker(false);
-    }, IDLE_TIMEOUT_MS);
-    // Resume playback if autoplay was blocked (e.g. on page refresh with no prior interaction)
-    videoRef.current?.play().catch(() => {});
-  }, []);
-
-  useEffect(() => {
-    resetIdle();
-    return () => {
-      if (idleTimer.current) clearTimeout(idleTimer.current);
-    };
-  }, [resetIdle]);
-
-  // ------------------------------------------------------------------
-  // Channel switching
-  // ------------------------------------------------------------------
-
   const channelCount = channels?.length ?? 0;
 
+  // useIdle after volume/subtitles/quality so onIdle can reference their stable setters
+  const { showOverlays, needsInteraction, setNeedsInteraction, resetIdle } = useIdle(
+    IDLE_TIMEOUT_MS,
+    videoRef,
+    useCallback(() => {
+      volume.setShowSlider(false);
+      subtitles.setShowSubtitlePicker(false);
+      quality.setShowQualityPicker(false);
+      // setters from useState are stable — empty deps is intentional
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []),
+  );
+
+  // useFullscreen after useIdle so we have showOverlays
+  const { isFullscreen, toggleFullscreen } = useFullscreen(
+    videoRef,
+    showOverlays,
+    streamUrl,
+  );
+
   const prevChannel = useCallback(() => {
     switchChannel(
       (channelIdx - 1 + Math.max(channelCount, 1)) % Math.max(channelCount, 1),
@@ -390,94 +151,74 @@ function TvPageContent() {
     resetIdle();
   }, [resetIdle]);
 
-  // ------------------------------------------------------------------
-  // Keyboard shortcuts
-  // ------------------------------------------------------------------
+  const { channelInput, handleDigit } = useChannelInput(
+    channelCount,
+    switchChannel,
+    resetIdle,
+  );
 
-  useEffect(() => {
-    const handleKey = (e: KeyboardEvent) => {
-      if (
-        e.target instanceof HTMLInputElement ||
-        e.target instanceof HTMLTextAreaElement
-      )
-        return;
-
-      switch (e.key) {
-        case "ArrowUp":
-        case "PageUp":
-          e.preventDefault();
-          nextChannel();
-          break;
-        case "ArrowDown":
-        case "PageDown":
-          e.preventDefault();
-          prevChannel();
-          break;
-        case "s":
-        case "S":
-          setShowStats((v) => !v);
-          break;
-        case "g":
-        case "G":
-          toggleSchedule();
-          break;
-        case "f":
-        case "F":
-          toggleFullscreen();
-          break;
-        case "m":
-        case "M":
-          toggleMute();
-          break;
-        case "c":
-        case "C":
-          if (subtitleTracks.length > 0) {
-            setActiveSubtitleTrack((prev) =>
-              prev === -1 ? subtitleTracks[0].id : -1,
-            );
-          }
-          break;
-        default: {
-          if (e.key >= "0" && e.key <= "9") {
-            setChannelInput((prev) => {
-              const next = prev + e.key;
-              if (channelInputTimer.current)
-                clearTimeout(channelInputTimer.current);
-              channelInputTimer.current = setTimeout(() => {
-                const num = parseInt(next, 10);
-                if (num >= 1 && num <= Math.max(channelCount, 1)) {
-                  switchChannel(num - 1);
-                  resetIdle();
-                }
-                setChannelInput("");
-              }, 1500);
-              return next;
-            });
-          }
-        }
-      }
-    };
-
-    window.addEventListener("keydown", handleKey);
-    return () => {
-      window.removeEventListener("keydown", handleKey);
-      if (channelInputTimer.current) clearTimeout(channelInputTimer.current);
-    };
-  }, [
+  useTvKeyboard({
     nextChannel,
     prevChannel,
     toggleSchedule,
     toggleFullscreen,
-    toggleMute,
-    channelCount,
-    switchChannel,
-    resetIdle,
-    subtitleTracks,
-  ]);
+    toggleMute: volume.toggleMute,
+    setShowStats,
+    subtitleTracks: subtitles.subtitleTracks,
+    setActiveSubtitleTrack: subtitles.setActiveSubtitleTrack,
+    handleDigit,
+  });
 
-  // ------------------------------------------------------------------
-  // Touch swipe (swipe up = next channel, swipe down = prev channel)
-  // ------------------------------------------------------------------
+  // Password modal triggers
+  useEffect(() => {
+    if ((broadcastError as Error)?.message === "password_required") {
+      passwords.setShowChannelPasswordModal(true);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [broadcastError]);
+
+  useEffect(() => {
+    if ((streamUrlError as Error)?.message === "password_required") {
+      passwords.setShowBlockPasswordModal(true);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [streamUrlError]);
+
+  // Clear transient states when slot changes
+  useEffect(() => {
+    setStreamError(false);
+    setVideoEnded(false);
+  }, [broadcast?.slot.id]);
+
+  // Tick for progress bar (every 30 s)
+  const [, setTick] = useState(0);
+  useEffect(() => {
+    const id = setInterval(() => setTick((n) => n + 1), 30_000);
+    return () => clearInterval(id);
+  }, []);
+
+  // Derived values
+  const hasBroadcast = !!broadcast;
+  const progress = hasBroadcast
+    ? calcProgress(broadcast.slot.start_at, broadcast.slot.item.duration_secs)
+    : 0;
+  const scheduleSlots = toScheduleSlots(epgSlots ?? [], broadcast?.slot.id);
+  const nextSlot = findNextSlot(epgSlots ?? [], broadcast?.slot.id);
+  const showBanner = hasBroadcast && progress >= BANNER_THRESHOLD && !!nextSlot;
+
+  const handleStreamError = useCallback(() => setStreamError(true), []);
+
+  const handleVideoEnded = useCallback(() => {
+    setVideoEnded(true);
+    queryClient.invalidateQueries({ queryKey: ["broadcast", channel?.id] });
+  }, [queryClient, channel?.id]);
+
+  const handleRetry = useCallback(() => {
+    queryClient.invalidateQueries({
+      queryKey: ["stream-url", channel?.id, broadcast?.slot.id],
+    });
+    setStreamError(false);
+  }, [queryClient, channel?.id, broadcast?.slot.id]);
 
   const handleTouchStart = useCallback(
     (e: React.TouchEvent) => {
@@ -500,161 +241,6 @@ function TvPageContent() {
     [nextChannel, prevChannel],
   );
 
-  // ------------------------------------------------------------------
-  // Stream error recovery
-  // ------------------------------------------------------------------
-
-  const handleStreamError = useCallback(() => {
-    setStreamError(true);
-  }, []);
-
-  const handleVideoEnded = useCallback(() => {
-    setVideoEnded(true);
-    // Immediately poll for the next broadcast instead of waiting up to 30 s.
-    queryClient.invalidateQueries({ queryKey: ["broadcast", channel?.id] });
-  }, [queryClient, channel?.id]);
-
-  const handleRetry = useCallback(() => {
-    // Bust the cached stream URL so it refetches with the current offset
-    queryClient.invalidateQueries({
-      queryKey: ["stream-url", channel?.id, broadcast?.slot.id],
-    });
-    setStreamError(false);
-  }, [queryClient, channel?.id, broadcast?.slot.id]);
-
-  const submitChannelPassword = useCallback(
-    (password: string) => {
-      if (!channel) return;
-      const next = { ...channelPasswords, [channel.id]: password };
-      setChannelPasswords(next);
-      try {
-        localStorage.setItem("channel_passwords", JSON.stringify(next));
-      } catch {}
-      setShowChannelPasswordModal(false);
-      queryClient.invalidateQueries({ queryKey: ["broadcast", channel.id] });
-    },
-    [channel, channelPasswords, queryClient],
-  );
-
-  const submitBlockPassword = useCallback(
-    (password: string) => {
-      if (!broadcast?.slot.id) return;
-      const next = { ...blockPasswords, [broadcast.slot.id]: password };
-      setBlockPasswords(next);
-      try {
-        localStorage.setItem("block_passwords", JSON.stringify(next));
-      } catch {}
-      setShowBlockPasswordModal(false);
-      queryClient.invalidateQueries({
-        queryKey: ["stream-url", channel?.id, broadcast.slot.id],
-      });
-    },
-    [broadcast?.slot.id, blockPasswords, channel?.id, queryClient],
-  );
-
-  // ------------------------------------------------------------------
-  // Render helpers
-  // ------------------------------------------------------------------
-
-  const renderBase = () => {
-    if (isLoadingChannels) {
-      return <NoSignal variant="loading" message="Tuning in…" />;
-    }
-    if (!channels || channels.length === 0) {
-      return (
-        <NoSignal
-          variant="no-signal"
-          message="No channels configured. Visit the Dashboard to create one."
-        />
-      );
-    }
-
-    // Channel-level access errors (not password — those show a modal)
-    const broadcastErrMsg = (broadcastError as Error)?.message;
-    if (broadcastErrMsg === "auth_required") {
-      return (
-        <NoSignal variant="locked" message="Sign in to watch this channel." />
-      );
-    }
-    if (
-      broadcastErrMsg &&
-      broadcastError &&
-      (broadcastError as { status?: number }).status === 403
-    ) {
-      return (
-        <NoSignal variant="locked" message="This channel is owner-only." />
-      );
-    }
-
-    if (isLoadingBroadcast) {
-      return <NoSignal variant="loading" message="Tuning in…" />;
-    }
-    if (!hasBroadcast) {
-      return (
-        <NoSignal
-          variant="no-signal"
-          message="Nothing is scheduled right now. Check back later."
-        />
-      );
-    }
-
-    // Block-level access errors (not password — those show a modal overlay)
-    const streamErrMsg = (streamUrlError as Error)?.message;
-    if (streamErrMsg === "auth_required") {
-      return (
-        <NoSignal variant="locked" message="Sign in to watch this block." />
-      );
-    }
-    if (
-      streamUrlError &&
-      (streamUrlError as { status?: number }).status === 403
-    ) {
-      return <NoSignal variant="locked" message="This block is owner-only." />;
-    }
-
-    if (streamError) {
-      return (
-        <NoSignal variant="error" message="Stream failed to load.">
-          <button
-            onClick={handleRetry}
-            className="mt-2 rounded-md border border-zinc-700 bg-zinc-800/80 px-4 py-2 text-xs text-zinc-300 transition-colors hover:bg-zinc-700 hover:text-zinc-100"
-          >
-            Retry
-          </button>
-        </NoSignal>
-      );
-    }
-    if (videoEnded) {
-      return <NoSignal variant="loading" message="Up next, stay tuned…" />;
-    }
-    if (streamUrl) {
-      return (
-        <VideoPlayer
-          ref={videoRef}
-          src={streamUrl}
-          className="absolute inset-0 h-full w-full"
-          initialOffset={
-            broadcast ? calcOffsetSecs(broadcast.slot.start_at) : 0
-          }
-          subtitleTrack={activeSubtitleTrack}
-          muted={isMuted}
-          showStats={showStats}
-          broadcast={broadcast}
-          onSubtitleTracksChange={setSubtitleTracks}
-          onStreamError={handleStreamError}
-          onEnded={handleVideoEnded}
-          onNeedsInteraction={() => setNeedsInteraction(true)}
-        />
-      );
-    }
-    // Broadcast exists but stream URL resolving — show loading until ready
-    return <NoSignal variant="loading" message="Loading stream…" />;
-  };
-
-  // ------------------------------------------------------------------
-  // Render
-  // ------------------------------------------------------------------
-
   return (
     <div
       className="relative flex flex-1 overflow-hidden bg-black"
@@ -664,226 +250,114 @@ function TvPageContent() {
       onTouchStart={handleTouchStart}
       onTouchEnd={handleTouchEnd}
     >
-      {/* ── Base layer ─────────────────────────────────────────────── */}
-      <div className="absolute inset-0">{renderBase()}</div>
+      {/* Base layer */}
+      <div className="absolute inset-0">
+        <TvBaseLayer
+          isLoadingChannels={isLoadingChannels}
+          hasChannels={!!channels && channels.length > 0}
+          broadcastError={broadcastError}
+          isLoadingBroadcast={isLoadingBroadcast}
+          hasBroadcast={hasBroadcast}
+          streamUrlError={streamUrlError}
+          streamError={streamError}
+          videoEnded={videoEnded}
+          streamUrl={streamUrl}
+          broadcast={broadcast}
+          activeSubtitleTrack={subtitles.activeSubtitleTrack}
+          isMuted={volume.isMuted}
+          showStats={showStats}
+          videoRef={videoRef}
+          onSubtitleTracksChange={subtitles.setSubtitleTracks}
+          onStreamError={handleStreamError}
+          onEnded={handleVideoEnded}
+          onNeedsInteraction={() => setNeedsInteraction(true)}
+          onRetry={handleRetry}
+        />
+      </div>
 
-      {/* ── Logo watermark — always visible, not tied to idle state ── */}
+      {/* Logo watermark */}
       {channel?.logo && (
-        <div
-          className={`pointer-events-none absolute z-10 p-3 ${logoPositionClass(channel.logo_position)}`}
-          style={{ opacity: channel.logo_opacity ?? 1 }}
-        >
-          {channel.logo.trimStart().startsWith("<") ? (
-            <div
-              dangerouslySetInnerHTML={{ __html: channel.logo }}
-              className="h-12 w-auto"
-            />
-          ) : (
-            // eslint-disable-next-line @next/next/no-img-element
-            <img
-              src={channel.logo}
-              alt=""
-              className="h-12 w-auto object-contain"
-            />
-          )}
-        </div>
+        <LogoWatermark
+          logo={channel.logo}
+          position={channel.logo_position}
+          opacity={channel.logo_opacity ?? 1}
+        />
       )}
 
-      {/* ── Channel password modal ──────────────────────────────────── */}
-      {showChannelPasswordModal && (
+      {/* Password modals */}
+      {passwords.showChannelPasswordModal && (
         <ChannelPasswordModal
           label="Channel password required"
-          onSubmit={submitChannelPassword}
-          onCancel={() => setShowChannelPasswordModal(false)}
+          onSubmit={passwords.submitChannelPassword}
+          onCancel={() => passwords.setShowChannelPasswordModal(false)}
         />
       )}
-
-      {/* ── Block password modal ────────────────────────────────────── */}
-      {showBlockPasswordModal && (
+      {passwords.showBlockPasswordModal && (
         <ChannelPasswordModal
           label="Block password required"
-          onSubmit={submitBlockPassword}
-          onCancel={() => setShowBlockPasswordModal(false)}
+          onSubmit={(pw) =>
+            passwords.submitBlockPassword(
+              broadcast?.slot.id ?? "",
+              channel?.id,
+              pw,
+            )
+          }
+          onCancel={() => passwords.setShowBlockPasswordModal(false)}
         />
       )}
 
-      {/* ── Autoplay blocked prompt ─────────────────────────────────── */}
-      {needsInteraction && (
-        <div className="pointer-events-none absolute inset-0 z-20 flex items-center justify-center">
-          <div className="rounded-xl bg-black/70 px-8 py-5 text-center backdrop-blur-sm">
-            <p className="text-sm font-medium text-zinc-200">
-              Click or move the mouse to play
-            </p>
-          </div>
-        </div>
-      )}
+      {/* Autoplay blocked prompt */}
+      {needsInteraction && <AutoplayPrompt />}
 
-      {/* ── Overlays — only when channels available ─────────────────── */}
+      {/* Overlays */}
       {channel && (
         <>
           <div
             className="pointer-events-none absolute inset-0 z-10 flex flex-col justify-between transition-opacity duration-300"
             style={{ opacity: showOverlays ? 1 : 0 }}
           >
-            {/* Top-right: subtitle picker + guide toggle */}
-            <div className="flex justify-end gap-2 p-4">
-              {subtitleTracks.length > 0 && (
-                <div className="pointer-events-auto relative">
-                  <button
-                    className="rounded-md bg-black/50 px-3 py-1.5 text-xs backdrop-blur transition-colors hover:bg-black/70 hover:text-white"
-                    style={{
-                      color: activeSubtitleTrack !== -1 ? "white" : undefined,
-                      borderBottom:
-                        activeSubtitleTrack !== -1
-                          ? "2px solid white"
-                          : "2px solid transparent",
-                    }}
-                    onClick={() => setShowSubtitlePicker((s) => !s)}
-                  >
-                    CC
-                  </button>
+            <TopControlBar
+              subtitleTracks={subtitles.subtitleTracks}
+              activeSubtitleTrack={subtitles.activeSubtitleTrack}
+              showSubtitlePicker={subtitles.showSubtitlePicker}
+              onToggleSubtitlePicker={() =>
+                subtitles.setShowSubtitlePicker((s) => !s)
+              }
+              onChangeSubtitleTrack={(id) => {
+                subtitles.setActiveSubtitleTrack(id);
+                subtitles.setShowSubtitlePicker(false);
+              }}
+              volume={volume.volume}
+              isMuted={volume.isMuted}
+              VolumeIcon={volume.VolumeIcon}
+              showVolumeSlider={volume.showSlider}
+              onToggleVolumeSlider={() => volume.setShowSlider((s) => !s)}
+              onToggleMute={volume.toggleMute}
+              onVolumeChange={(v) => {
+                volume.setVolume(v);
+                volume.setIsMuted(v === 0);
+              }}
+              isFullscreen={isFullscreen}
+              onToggleFullscreen={toggleFullscreen}
+              castAvailable={castAvailable}
+              isCasting={isCasting}
+              castDeviceName={castDeviceName}
+              streamUrl={streamUrl}
+              onRequestCast={requestCast}
+              onStopCasting={stopCasting}
+              quality={quality.quality}
+              qualityOptions={QUALITY_OPTIONS}
+              showQualityPicker={quality.showQualityPicker}
+              onToggleQualityPicker={() =>
+                quality.setShowQualityPicker((s) => !s)
+              }
+              onChangeQuality={quality.changeQuality}
+              showStats={showStats}
+              onToggleStats={() => setShowStats((v) => !v)}
+              showSchedule={showSchedule}
+              onToggleSchedule={toggleSchedule}
+            />
 
-                  {showSubtitlePicker && (
-                    <div className="absolute right-0 top-9 z-30 min-w-[10rem] overflow-hidden rounded-md border border-zinc-700 bg-zinc-900/95 py-1 shadow-xl backdrop-blur">
-                      <button
-                        className={`w-full px-3 py-1.5 text-left text-xs transition-colors hover:bg-zinc-700 ${activeSubtitleTrack === -1 ? "text-white" : "text-zinc-400"}`}
-                        onClick={() => {
-                          setActiveSubtitleTrack(-1);
-                          setShowSubtitlePicker(false);
-                        }}
-                      >
-                        Off
-                      </button>
-                      {subtitleTracks.map((track) => (
-                        <button
-                          key={track.id}
-                          className={`w-full px-3 py-1.5 text-left text-xs transition-colors hover:bg-zinc-700 ${activeSubtitleTrack === track.id ? "text-white" : "text-zinc-400"}`}
-                          onClick={() => {
-                            setActiveSubtitleTrack(track.id);
-                            setShowSubtitlePicker(false);
-                          }}
-                        >
-                          {track.name || track.lang || `Track ${track.id + 1}`}
-                        </button>
-                      ))}
-                    </div>
-                  )}
-                </div>
-              )}
-
-              {/* Volume control */}
-              <div className="pointer-events-auto relative">
-                <button
-                  className="rounded-md bg-black/50 p-1.5 text-zinc-400 backdrop-blur transition-colors hover:bg-black/70 hover:text-white"
-                  onClick={() => setShowVolumeSlider((s) => !s)}
-                  title="Volume"
-                >
-                  <VolumeIcon className="h-4 w-4" />
-                </button>
-
-                {showVolumeSlider && (
-                  <div className="absolute right-0 top-9 z-30 w-36 rounded-lg border border-zinc-700 bg-zinc-900/95 p-3 shadow-xl backdrop-blur">
-                    <input
-                      type="range"
-                      min={0}
-                      max={100}
-                      value={isMuted ? 0 : Math.round(volume * 100)}
-                      onChange={(e) => {
-                        const v = Number(e.target.value) / 100;
-                        setVolume(v);
-                        setIsMuted(v === 0);
-                      }}
-                      className="w-full accent-white"
-                    />
-                    <div className="mt-1.5 flex items-center justify-between">
-                      <button
-                        onClick={toggleMute}
-                        className="text-[10px] text-zinc-500 hover:text-zinc-300"
-                      >
-                        {isMuted ? "Unmute [M]" : "Mute [M]"}
-                      </button>
-                      <span className="font-mono text-[10px] text-zinc-500">
-                        {isMuted ? "0" : Math.round(volume * 100)}%
-                      </span>
-                    </div>
-                  </div>
-                )}
-              </div>
-
-              <button
-                className="pointer-events-auto rounded-md bg-black/50 p-1.5 text-zinc-400 backdrop-blur transition-colors hover:bg-black/70 hover:text-white"
-                onClick={toggleFullscreen}
-                title={isFullscreen ? "Exit fullscreen [F]" : "Fullscreen [F]"}
-              >
-                {isFullscreen ? (
-                  <Minimize2 className="h-4 w-4" />
-                ) : (
-                  <Maximize2 className="h-4 w-4" />
-                )}
-              </button>
-
-              {castAvailable && (
-                <button
-                  className={`pointer-events-auto rounded-md bg-black/50 p-1.5 backdrop-blur transition-colors hover:bg-black/70 hover:text-white ${
-                    isCasting ? "text-blue-400" : "text-zinc-400"
-                  }`}
-                  onClick={() =>
-                    isCasting
-                      ? stopCasting()
-                      : streamUrl && requestCast(streamUrl)
-                  }
-                  title={
-                    isCasting
-                      ? `Stop casting to ${castDeviceName ?? "TV"}`
-                      : "Cast to TV"
-                  }
-                >
-                  <Cast className="h-4 w-4" />
-                </button>
-              )}
-
-              {/* Quality picker */}
-              <div className="pointer-events-auto relative">
-                <button
-                  className="rounded-md bg-black/50 px-3 py-1.5 text-xs text-zinc-400 backdrop-blur transition-colors hover:bg-black/70 hover:text-white"
-                  onClick={() => setShowQualityPicker((s) => !s)}
-                  title="Stream quality"
-                >
-                  {QUALITY_OPTIONS.find((o) => o.value === quality)?.label ??
-                    quality}
-                </button>
-                {showQualityPicker && (
-                  <div className="absolute right-0 top-9 z-30 min-w-[8rem] overflow-hidden rounded-md border border-zinc-700 bg-zinc-900/95 py-1 shadow-xl backdrop-blur">
-                    {QUALITY_OPTIONS.map((opt) => (
-                      <button
-                        key={opt.value}
-                        className={`w-full px-3 py-1.5 text-left text-xs transition-colors hover:bg-zinc-700 ${quality === opt.value ? "text-white" : "text-zinc-400"}`}
-                        onClick={() => changeQuality(opt.value)}
-                      >
-                        {opt.label}
-                      </button>
-                    ))}
-                  </div>
-                )}
-              </div>
-
-              <button
-                className={`pointer-events-auto rounded-md bg-black/50 p-1.5 backdrop-blur transition-colors hover:bg-black/70 hover:text-white ${showStats ? "text-violet-400" : "text-zinc-400"}`}
-                onClick={() => setShowStats((v) => !v)}
-                title="Stats for nerds [S]"
-              >
-                <Info className="h-4 w-4" />
-              </button>
-
-              <button
-                className="pointer-events-auto rounded-md bg-black/50 px-3 py-1.5 text-xs text-zinc-400 backdrop-blur transition-colors hover:bg-black/70 hover:text-white"
-                onClick={toggleSchedule}
-              >
-                {showSchedule ? "Hide guide" : "Guide [G]"}
-              </button>
-            </div>
-
-            {/* Bottom: banner + info row */}
             <div className="flex flex-col gap-3 bg-linear-to-t from-black/80 via-black/40 to-transparent p-5 pt-20">
               {showBanner && nextSlot && (
                 <UpNextBanner
@@ -892,7 +366,6 @@ function TvPageContent() {
                   nextShowStartTime={fmtTime(nextSlot.start_at)}
                 />
               )}
-
               <div className="flex items-end justify-between gap-4">
                 {hasBroadcast ? (
                   <ChannelInfo
@@ -904,7 +377,6 @@ function TvPageContent() {
                     progress={progress}
                   />
                 ) : (
-                  /* Minimal channel badge when no broadcast */
                   <div className="rounded-lg bg-black/60 px-4 py-3 backdrop-blur-md">
                     <div className="flex items-center gap-2">
                       <span className="flex h-7 min-w-9 items-center justify-center rounded bg-white px-1.5 font-mono text-xs font-bold text-black">
@@ -916,7 +388,6 @@ function TvPageContent() {
                     </div>
                   </div>
                 )}
-
                 <div className="pointer-events-auto">
                   <ChannelControls
                     channelNumber={channelIdx + 1}
@@ -929,26 +400,14 @@ function TvPageContent() {
             </div>
           </div>
 
-          {/* Casting indicator */}
           {isCasting && castDeviceName && (
             <div className="pointer-events-none absolute left-4 top-4 z-10 rounded-md bg-black/60 px-3 py-1.5 text-xs text-blue-300 backdrop-blur">
               Casting to {castDeviceName}
             </div>
           )}
 
-          {/* Channel number input overlay */}
-          {channelInput && (
-            <div className="pointer-events-none absolute left-1/2 top-1/2 z-30 -translate-x-1/2 -translate-y-1/2 rounded-xl bg-black/80 px-8 py-5 text-center backdrop-blur">
-              <p className="mb-1 text-[10px] uppercase tracking-widest text-zinc-500">
-                Channel
-              </p>
-              <p className="font-mono text-5xl font-bold text-white">
-                {channelInput}
-              </p>
-            </div>
-          )}
+          <ChannelNumberOverlay channelInput={channelInput} />
 
-          {/* Schedule overlay — outside the fading div so it has its own visibility */}
           {showOverlays && showSchedule && (
             <div className="absolute bottom-4 right-4 top-14 z-20 w-80">
               <ScheduleOverlay
diff --git a/k-tv-frontend/hooks/use-channel-form.ts b/k-tv-frontend/hooks/use-channel-form.ts
new file mode 100644
index 0000000..558420b
--- /dev/null
+++ b/k-tv-frontend/hooks/use-channel-form.ts
@@ -0,0 +1,158 @@
+"use client";
+
+import { useState, useEffect, useRef } from "react";
+import { minsToTime } from "@/app/(main)/dashboard/components/block-timeline";
+import type {
+  AccessMode,
+  ChannelResponse,
+  LogoPosition,
+  ProgrammingBlock,
+  MediaFilter,
+  RecyclePolicy,
+} from "@/lib/types";
+
+export const WEBHOOK_PRESETS = {
+  discord: `{
+  "embeds": [{
+    "title": "📺 {{event}}",
+    "description": "{{#if data.item.title}}Now playing: **{{data.item.title}}**{{else}}No signal{{/if}}",
+    "color": 3447003,
+    "timestamp": "{{timestamp}}"
+  }]
+}`,
+  slack: `{
+  "text": "📺 *{{event}}*{{#if data.item.title}} — {{data.item.title}}{{/if}}"
+}`,
+} as const;
+
+export type WebhookFormat = "default" | "discord" | "slack" | "custom";
+
+export function defaultFilter(): MediaFilter {
+  return {
+    content_type: null,
+    genres: [],
+    decade: null,
+    tags: [],
+    min_duration_secs: null,
+    max_duration_secs: null,
+    collections: [],
+    series_names: [],
+    search_term: null,
+  };
+}
+
+export function defaultBlock(startMins = 20 * 60, durationMins = 60): ProgrammingBlock {
+  return {
+    id: crypto.randomUUID(),
+    name: "",
+    start_time: minsToTime(startMins),
+    duration_mins: durationMins,
+    content: { type: "algorithmic", filter: defaultFilter(), strategy: "random" },
+    loop_on_finish: true,
+    ignore_recycle_policy: false,
+    access_mode: "public",
+  };
+}
+
+export function useChannelForm(channel: ChannelResponse | null) {
+  const [name, setName] = useState("");
+  const [description, setDescription] = useState("");
+  const [timezone, setTimezone] = useState("UTC");
+  const [blocks, setBlocks] = useState<ProgrammingBlock[]>([]);
+  const [recyclePolicy, setRecyclePolicy] = useState<RecyclePolicy>({
+    cooldown_days: null,
+    cooldown_generations: null,
+    min_available_ratio: 0.1,
+  });
+  const [autoSchedule, setAutoSchedule] = useState(false);
+  const [accessMode, setAccessMode] = useState<AccessMode>("public");
+  const [accessPassword, setAccessPassword] = useState("");
+  const [logo, setLogo] = useState<string | null>(null);
+  const [logoPosition, setLogoPosition] = useState<LogoPosition>("top_right");
+  const [logoOpacity, setLogoOpacity] = useState(100);
+  const [webhookUrl, setWebhookUrl] = useState("");
+  const [webhookPollInterval, setWebhookPollInterval] = useState<number | "">(5);
+  const [webhookFormat, setWebhookFormat] = useState<WebhookFormat>("default");
+  const [webhookBodyTemplate, setWebhookBodyTemplate] = useState("");
+  const [webhookHeaders, setWebhookHeaders] = useState("");
+  const [selectedBlockId, setSelectedBlockId] = useState<string | null>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  // Reset form when channel changes
+  useEffect(() => {
+    if (channel) {
+      setName(channel.name);
+      setDescription(channel.description ?? "");
+      setTimezone(channel.timezone);
+      setBlocks(channel.schedule_config.blocks);
+      setRecyclePolicy(channel.recycle_policy);
+      setAutoSchedule(channel.auto_schedule);
+      setAccessMode(channel.access_mode ?? "public");
+      setAccessPassword("");
+      setLogo(channel.logo ?? null);
+      setLogoPosition(channel.logo_position ?? "top_right");
+      setLogoOpacity(Math.round((channel.logo_opacity ?? 1) * 100));
+      setWebhookUrl(channel.webhook_url ?? "");
+      setWebhookPollInterval(channel.webhook_poll_interval_secs ?? 5);
+      const tmpl = channel.webhook_body_template ?? "";
+      setWebhookBodyTemplate(tmpl);
+      setWebhookHeaders(channel.webhook_headers ?? "");
+      if (!tmpl) {
+        setWebhookFormat("default");
+      } else if (tmpl === WEBHOOK_PRESETS.discord) {
+        setWebhookFormat("discord");
+      } else if (tmpl === WEBHOOK_PRESETS.slack) {
+        setWebhookFormat("slack");
+      } else {
+        setWebhookFormat("custom");
+      }
+      setSelectedBlockId(null);
+    }
+  }, [channel]);
+
+  const addBlock = (startMins = 20 * 60, durationMins = 60) => {
+    const block = defaultBlock(startMins, durationMins);
+    setBlocks((prev) => [...prev, block]);
+    setSelectedBlockId(block.id);
+  };
+
+  const updateBlock = (idx: number, block: ProgrammingBlock) =>
+    setBlocks((prev) => prev.map((b, i) => (i === idx ? block : b)));
+
+  const removeBlock = (idx: number) => {
+    setBlocks((prev) => {
+      const next = prev.filter((_, i) => i !== idx);
+      if (selectedBlockId === prev[idx].id) setSelectedBlockId(null);
+      return next;
+    });
+  };
+
+  return {
+    // Basic info
+    name, setName,
+    description, setDescription,
+    timezone, setTimezone,
+    autoSchedule, setAutoSchedule,
+    // Access
+    accessMode, setAccessMode,
+    accessPassword, setAccessPassword,
+    // Logo
+    logo, setLogo,
+    logoPosition, setLogoPosition,
+    logoOpacity, setLogoOpacity,
+    fileInputRef,
+    // Webhook
+    webhookUrl, setWebhookUrl,
+    webhookPollInterval, setWebhookPollInterval,
+    webhookFormat, setWebhookFormat,
+    webhookBodyTemplate, setWebhookBodyTemplate,
+    webhookHeaders, setWebhookHeaders,
+    // Blocks
+    blocks, setBlocks,
+    selectedBlockId, setSelectedBlockId,
+    recyclePolicy, setRecyclePolicy,
+    addBlock,
+    updateBlock,
+    removeBlock,
+  };
+}
diff --git a/k-tv-frontend/hooks/use-channel-input.ts b/k-tv-frontend/hooks/use-channel-input.ts
new file mode 100644
index 0000000..4298971
--- /dev/null
+++ b/k-tv-frontend/hooks/use-channel-input.ts
@@ -0,0 +1,39 @@
+"use client";
+
+import { useState, useEffect, useCallback, useRef } from "react";
+
+export function useChannelInput(
+  channelCount: number,
+  switchChannel: (idx: number) => void,
+  resetIdle: () => void,
+) {
+  const [channelInput, setChannelInput] = useState("");
+  const channelInputTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const handleDigit = useCallback(
+    (digit: string) => {
+      setChannelInput((prev) => {
+        const next = prev + digit;
+        if (channelInputTimer.current) clearTimeout(channelInputTimer.current);
+        channelInputTimer.current = setTimeout(() => {
+          const num = parseInt(next, 10);
+          if (num >= 1 && num <= Math.max(channelCount, 1)) {
+            switchChannel(num - 1);
+            resetIdle();
+          }
+          setChannelInput("");
+        }, 1500);
+        return next;
+      });
+    },
+    [channelCount, switchChannel, resetIdle],
+  );
+
+  useEffect(() => {
+    return () => {
+      if (channelInputTimer.current) clearTimeout(channelInputTimer.current);
+    };
+  }, []);
+
+  return { channelInput, handleDigit };
+}
diff --git a/k-tv-frontend/hooks/use-channel-order.ts b/k-tv-frontend/hooks/use-channel-order.ts
new file mode 100644
index 0000000..3db7921
--- /dev/null
+++ b/k-tv-frontend/hooks/use-channel-order.ts
@@ -0,0 +1,53 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import type { ChannelResponse } from "@/lib/types";
+
+export function useChannelOrder(channels: ChannelResponse[] | undefined) {
+  const [channelOrder, setChannelOrder] = useState<string[]>([]);
+
+  useEffect(() => {
+    try {
+      const stored = localStorage.getItem("k-tv-channel-order");
+      if (stored) setChannelOrder(JSON.parse(stored));
+    } catch {}
+  }, []);
+
+  const saveOrder = (order: string[]) => {
+    setChannelOrder(order);
+    try {
+      localStorage.setItem("k-tv-channel-order", JSON.stringify(order));
+    } catch {}
+  };
+
+  const sortedChannels = channels
+    ? [...channels].sort((a, b) => {
+        const ai = channelOrder.indexOf(a.id);
+        const bi = channelOrder.indexOf(b.id);
+        if (ai === -1 && bi === -1) return 0;
+        if (ai === -1) return 1;
+        if (bi === -1) return -1;
+        return ai - bi;
+      })
+    : [];
+
+  const handleMoveUp = (channelId: string) => {
+    const ids = sortedChannels.map((c) => c.id);
+    const idx = ids.indexOf(channelId);
+    if (idx <= 0) return;
+    const next = [...ids];
+    [next[idx - 1], next[idx]] = [next[idx], next[idx - 1]];
+    saveOrder(next);
+  };
+
+  const handleMoveDown = (channelId: string) => {
+    const ids = sortedChannels.map((c) => c.id);
+    const idx = ids.indexOf(channelId);
+    if (idx === -1 || idx >= ids.length - 1) return;
+    const next = [...ids];
+    [next[idx], next[idx + 1]] = [next[idx + 1], next[idx]];
+    saveOrder(next);
+  };
+
+  return { channelOrder, sortedChannels, handleMoveUp, handleMoveDown };
+}
diff --git a/k-tv-frontend/hooks/use-channel-passwords.ts b/k-tv-frontend/hooks/use-channel-passwords.ts
new file mode 100644
index 0000000..2d1a7c2
--- /dev/null
+++ b/k-tv-frontend/hooks/use-channel-passwords.ts
@@ -0,0 +1,74 @@
+"use client";
+
+import { useState, useCallback } from "react";
+import { useQueryClient } from "@tanstack/react-query";
+
+export function useChannelPasswords(channelId?: string) {
+  const queryClient = useQueryClient();
+
+  const [channelPasswords, setChannelPasswords] = useState<Record<string, string>>(() => {
+    try {
+      return JSON.parse(localStorage.getItem("channel_passwords") ?? "{}");
+    } catch {
+      return {};
+    }
+  });
+  const [blockPasswords, setBlockPasswords] = useState<Record<string, string>>(() => {
+    try {
+      return JSON.parse(localStorage.getItem("block_passwords") ?? "{}");
+    } catch {
+      return {};
+    }
+  });
+  const [showChannelPasswordModal, setShowChannelPasswordModal] = useState(false);
+  const [showBlockPasswordModal, setShowBlockPasswordModal] = useState(false);
+
+  // channelPassword only depends on channelId — available immediately from localStorage
+  const channelPassword = channelId ? channelPasswords[channelId] : undefined;
+
+  // blockPassword is derived lazily by the caller (needs broadcast.slot.id)
+  const getBlockPassword = useCallback(
+    (slotId?: string) => (slotId ? blockPasswords[slotId] : undefined),
+    [blockPasswords],
+  );
+
+  const submitChannelPassword = useCallback(
+    (password: string) => {
+      if (!channelId) return;
+      const next = { ...channelPasswords, [channelId]: password };
+      setChannelPasswords(next);
+      try {
+        localStorage.setItem("channel_passwords", JSON.stringify(next));
+      } catch {}
+      setShowChannelPasswordModal(false);
+      queryClient.invalidateQueries({ queryKey: ["broadcast", channelId] });
+    },
+    [channelId, channelPasswords, queryClient],
+  );
+
+  const submitBlockPassword = useCallback(
+    (slotId: string, channelIdForQuery: string | undefined, password: string) => {
+      const next = { ...blockPasswords, [slotId]: password };
+      setBlockPasswords(next);
+      try {
+        localStorage.setItem("block_passwords", JSON.stringify(next));
+      } catch {}
+      setShowBlockPasswordModal(false);
+      queryClient.invalidateQueries({
+        queryKey: ["stream-url", channelIdForQuery, slotId],
+      });
+    },
+    [blockPasswords, queryClient],
+  );
+
+  return {
+    channelPassword,
+    getBlockPassword,
+    showChannelPasswordModal,
+    setShowChannelPasswordModal,
+    showBlockPasswordModal,
+    setShowBlockPasswordModal,
+    submitChannelPassword,
+    submitBlockPassword,
+  };
+}
diff --git a/k-tv-frontend/hooks/use-fullscreen.ts b/k-tv-frontend/hooks/use-fullscreen.ts
new file mode 100644
index 0000000..cce5cf1
--- /dev/null
+++ b/k-tv-frontend/hooks/use-fullscreen.ts
@@ -0,0 +1,64 @@
+"use client";
+
+import { useState, useEffect, useCallback, RefObject } from "react";
+
+export function useFullscreen(
+  videoRef: RefObject<HTMLVideoElement | null>,
+  showOverlays: boolean,
+  streamUrl?: string | null,
+) {
+  const [isFullscreen, setIsFullscreen] = useState(false);
+
+  // Standard fullscreenchange
+  useEffect(() => {
+    const handler = () => setIsFullscreen(!!document.fullscreenElement);
+    document.addEventListener("fullscreenchange", handler);
+    return () => document.removeEventListener("fullscreenchange", handler);
+  }, []);
+
+  // Body classes for nav hiding
+  useEffect(() => {
+    document.body.classList.toggle("tv-fullscreen", isFullscreen);
+    document.body.classList.toggle("tv-overlays", isFullscreen && showOverlays);
+    return () => document.body.classList.remove("tv-fullscreen", "tv-overlays");
+  }, [isFullscreen, showOverlays]);
+
+  // iOS Safari webkit events — re-attach when stream URL changes (new video element)
+  useEffect(() => {
+    const video = videoRef.current;
+    if (!video) return;
+    const onBegin = () => setIsFullscreen(true);
+    const onEnd = () => setIsFullscreen(false);
+    video.addEventListener("webkitbeginfullscreen", onBegin);
+    video.addEventListener("webkitendfullscreen", onEnd);
+    return () => {
+      video.removeEventListener("webkitbeginfullscreen", onBegin);
+      video.removeEventListener("webkitendfullscreen", onEnd);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [streamUrl]);
+
+  const toggleFullscreen = useCallback(() => {
+    if (document.fullscreenEnabled) {
+      if (!document.fullscreenElement) {
+        document.documentElement.requestFullscreen().catch(() => {});
+      } else {
+        document.exitFullscreen().catch(() => {});
+      }
+      return;
+    }
+    const video = videoRef.current as HTMLVideoElement & {
+      webkitEnterFullscreen?: () => void;
+      webkitExitFullscreen?: () => void;
+      webkitDisplayingFullscreen?: boolean;
+    };
+    if (!video?.webkitEnterFullscreen) return;
+    if (video.webkitDisplayingFullscreen) {
+      video.webkitExitFullscreen?.();
+    } else {
+      video.webkitEnterFullscreen();
+    }
+  }, [videoRef]);
+
+  return { isFullscreen, toggleFullscreen };
+}
diff --git a/k-tv-frontend/hooks/use-idle.ts b/k-tv-frontend/hooks/use-idle.ts
new file mode 100644
index 0000000..1d7f719
--- /dev/null
+++ b/k-tv-frontend/hooks/use-idle.ts
@@ -0,0 +1,38 @@
+"use client";
+
+import { useState, useEffect, useCallback, useRef, RefObject } from "react";
+
+export function useIdle(
+  timeoutMs: number,
+  videoRef: RefObject<HTMLVideoElement | null>,
+  onIdle?: () => void,
+) {
+  const [showOverlays, setShowOverlays] = useState(true);
+  const [needsInteraction, setNeedsInteraction] = useState(false);
+  const idleTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  // Keep onIdle in a ref so resetIdle doesn't need it as a dep
+  const onIdleRef = useRef(onIdle);
+  useEffect(() => {
+    onIdleRef.current = onIdle;
+  });
+
+  const resetIdle = useCallback(() => {
+    setShowOverlays(true);
+    setNeedsInteraction(false);
+    if (idleTimer.current) clearTimeout(idleTimer.current);
+    idleTimer.current = setTimeout(() => {
+      setShowOverlays(false);
+      onIdleRef.current?.();
+    }, timeoutMs);
+    videoRef.current?.play().catch(() => {});
+  }, [timeoutMs, videoRef]);
+
+  useEffect(() => {
+    resetIdle();
+    return () => {
+      if (idleTimer.current) clearTimeout(idleTimer.current);
+    };
+  }, [resetIdle]);
+
+  return { showOverlays, needsInteraction, setNeedsInteraction, resetIdle };
+}
diff --git a/k-tv-frontend/hooks/use-import-channel.ts b/k-tv-frontend/hooks/use-import-channel.ts
new file mode 100644
index 0000000..12a1ca8
--- /dev/null
+++ b/k-tv-frontend/hooks/use-import-channel.ts
@@ -0,0 +1,47 @@
+"use client";
+
+import { useState } from "react";
+import { useQueryClient } from "@tanstack/react-query";
+import { api } from "@/lib/api";
+import type { ChannelImportData } from "@/app/(main)/dashboard/components/import-channel-dialog";
+
+export function useImportChannel(token: string | null) {
+  const queryClient = useQueryClient();
+  const [isPending, setIsPending] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleImport = async (data: ChannelImportData) => {
+    if (!token) return;
+    setIsPending(true);
+    setError(null);
+    try {
+      const created = await api.channels.create(
+        {
+          name: data.name,
+          timezone: data.timezone,
+          description: data.description,
+        },
+        token,
+      );
+      await api.channels.update(
+        created.id,
+        {
+          schedule_config: { blocks: data.blocks },
+          recycle_policy: data.recycle_policy,
+        },
+        token,
+      );
+      await queryClient.invalidateQueries({ queryKey: ["channels"] });
+      return true; // success signal for closing dialog
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Import failed");
+      return false;
+    } finally {
+      setIsPending(false);
+    }
+  };
+
+  const clearError = () => setError(null);
+
+  return { handleImport, isPending, error, clearError };
+}
diff --git a/k-tv-frontend/hooks/use-quality.ts b/k-tv-frontend/hooks/use-quality.ts
new file mode 100644
index 0000000..a56598f
--- /dev/null
+++ b/k-tv-frontend/hooks/use-quality.ts
@@ -0,0 +1,39 @@
+"use client";
+
+import { useState, useCallback } from "react";
+import { useQueryClient } from "@tanstack/react-query";
+
+export const QUALITY_OPTIONS = [
+  { value: "direct", label: "Auto" },
+  { value: "40000000", label: "40 Mbps" },
+  { value: "8000000", label: "8 Mbps" },
+  { value: "2000000", label: "2 Mbps" },
+];
+
+export function useQuality(channelId?: string, slotId?: string) {
+  const queryClient = useQueryClient();
+  const [quality, setQuality] = useState<string>(() => {
+    try {
+      return localStorage.getItem("quality") ?? "direct";
+    } catch {
+      return "direct";
+    }
+  });
+  const [showQualityPicker, setShowQualityPicker] = useState(false);
+
+  const changeQuality = useCallback(
+    (q: string) => {
+      setQuality(q);
+      try {
+        localStorage.setItem("quality", q);
+      } catch {}
+      setShowQualityPicker(false);
+      queryClient.invalidateQueries({
+        queryKey: ["stream-url", channelId, slotId],
+      });
+    },
+    [queryClient, channelId, slotId],
+  );
+
+  return { quality, showQualityPicker, setShowQualityPicker, changeQuality, QUALITY_OPTIONS };
+}
diff --git a/k-tv-frontend/hooks/use-regenerate-all.ts b/k-tv-frontend/hooks/use-regenerate-all.ts
new file mode 100644
index 0000000..a90bcc7
--- /dev/null
+++ b/k-tv-frontend/hooks/use-regenerate-all.ts
@@ -0,0 +1,34 @@
+"use client";
+
+import { useState } from "react";
+import { useQueryClient } from "@tanstack/react-query";
+import { toast } from "sonner";
+import { api } from "@/lib/api";
+import type { ChannelResponse } from "@/lib/types";
+
+export function useRegenerateAllSchedules(
+  channels: ChannelResponse[] | undefined,
+  token: string | null,
+) {
+  const queryClient = useQueryClient();
+  const [isRegeneratingAll, setIsRegeneratingAll] = useState(false);
+
+  const handleRegenerateAll = async () => {
+    if (!token || !channels || channels.length === 0) return;
+    setIsRegeneratingAll(true);
+    let failed = 0;
+    for (const ch of channels) {
+      try {
+        await api.schedule.generate(ch.id, token);
+        queryClient.invalidateQueries({ queryKey: ["schedule", ch.id] });
+      } catch {
+        failed++;
+      }
+    }
+    setIsRegeneratingAll(false);
+    if (failed === 0) toast.success(`All ${channels.length} schedules regenerated`);
+    else toast.error(`${failed} schedule(s) failed to generate`);
+  };
+
+  return { isRegeneratingAll, handleRegenerateAll };
+}
diff --git a/k-tv-frontend/hooks/use-subtitles.ts b/k-tv-frontend/hooks/use-subtitles.ts
new file mode 100644
index 0000000..0c324d1
--- /dev/null
+++ b/k-tv-frontend/hooks/use-subtitles.ts
@@ -0,0 +1,26 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import type { SubtitleTrack } from "@/app/(main)/tv/components/video-player";
+
+export function useSubtitlePicker(channelIdx: number, slotId?: string) {
+  const [subtitleTracks, setSubtitleTracks] = useState<SubtitleTrack[]>([]);
+  const [activeSubtitleTrack, setActiveSubtitleTrack] = useState(-1);
+  const [showSubtitlePicker, setShowSubtitlePicker] = useState(false);
+
+  // Reset when channel or slot changes
+  useEffect(() => {
+    setSubtitleTracks([]);
+    setActiveSubtitleTrack(-1);
+    setShowSubtitlePicker(false);
+  }, [channelIdx, slotId]);
+
+  return {
+    subtitleTracks,
+    setSubtitleTracks,
+    activeSubtitleTrack,
+    setActiveSubtitleTrack,
+    showSubtitlePicker,
+    setShowSubtitlePicker,
+  };
+}
diff --git a/k-tv-frontend/hooks/use-tv-keyboard.ts b/k-tv-frontend/hooks/use-tv-keyboard.ts
new file mode 100644
index 0000000..936f8d3
--- /dev/null
+++ b/k-tv-frontend/hooks/use-tv-keyboard.ts
@@ -0,0 +1,78 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import type { SubtitleTrack } from "@/app/(main)/tv/components/video-player";
+
+interface UseTvKeyboardOptions {
+  nextChannel: () => void;
+  prevChannel: () => void;
+  toggleSchedule: () => void;
+  toggleFullscreen: () => void;
+  toggleMute: () => void;
+  setShowStats: React.Dispatch<React.SetStateAction<boolean>>;
+  subtitleTracks: SubtitleTrack[];
+  setActiveSubtitleTrack: React.Dispatch<React.SetStateAction<number>>;
+  handleDigit: (digit: string) => void;
+}
+
+export function useTvKeyboard(opts: UseTvKeyboardOptions) {
+  const optsRef = useRef(opts);
+  useEffect(() => {
+    optsRef.current = opts;
+  });
+
+  useEffect(() => {
+    const handleKey = (e: KeyboardEvent) => {
+      if (
+        e.target instanceof HTMLInputElement ||
+        e.target instanceof HTMLTextAreaElement
+      )
+        return;
+
+      const o = optsRef.current;
+      switch (e.key) {
+        case "ArrowUp":
+        case "PageUp":
+          e.preventDefault();
+          o.nextChannel();
+          break;
+        case "ArrowDown":
+        case "PageDown":
+          e.preventDefault();
+          o.prevChannel();
+          break;
+        case "s":
+        case "S":
+          o.setShowStats((v) => !v);
+          break;
+        case "g":
+        case "G":
+          o.toggleSchedule();
+          break;
+        case "f":
+        case "F":
+          o.toggleFullscreen();
+          break;
+        case "m":
+        case "M":
+          o.toggleMute();
+          break;
+        case "c":
+        case "C":
+          if (o.subtitleTracks.length > 0) {
+            o.setActiveSubtitleTrack((prev) =>
+              prev === -1 ? o.subtitleTracks[0].id : -1,
+            );
+          }
+          break;
+        default:
+          if (e.key >= "0" && e.key <= "9") {
+            o.handleDigit(e.key);
+          }
+      }
+    };
+
+    window.addEventListener("keydown", handleKey);
+    return () => window.removeEventListener("keydown", handleKey);
+  }, []);
+}
diff --git a/k-tv-frontend/hooks/use-volume.ts b/k-tv-frontend/hooks/use-volume.ts
new file mode 100644
index 0000000..9b7459d
--- /dev/null
+++ b/k-tv-frontend/hooks/use-volume.ts
@@ -0,0 +1,39 @@
+"use client";
+
+import { useState, useEffect, useCallback, useRef, RefObject } from "react";
+import { Volume1, Volume2, VolumeX } from "lucide-react";
+
+export function useVolume(
+  videoRef: RefObject<HTMLVideoElement | null>,
+  isCasting: boolean,
+) {
+  const [volume, setVolume] = useState(1);
+  const [isMuted, setIsMuted] = useState(false);
+  const [showSlider, setShowSlider] = useState(false);
+
+  // Sync to video element
+  useEffect(() => {
+    if (!videoRef.current) return;
+    videoRef.current.muted = isMuted;
+    videoRef.current.volume = volume;
+  }, [isMuted, volume, videoRef]);
+
+  // Auto-mute when casting, restore on cast end
+  const prevMutedRef = useRef(false);
+  useEffect(() => {
+    if (isCasting) {
+      prevMutedRef.current = isMuted;
+      setIsMuted(true);
+    } else {
+      setIsMuted(prevMutedRef.current);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isCasting]);
+
+  const toggleMute = useCallback(() => setIsMuted((m) => !m), []);
+
+  const VolumeIcon =
+    isMuted || volume === 0 ? VolumeX : volume < 0.5 ? Volume1 : Volume2;
+
+  return { volume, setVolume, isMuted, setIsMuted, toggleMute, VolumeIcon, showSlider, setShowSlider };
+}
diff --git a/k-tv-frontend/lib/channel-export.ts b/k-tv-frontend/lib/channel-export.ts
new file mode 100644
index 0000000..36f8708
--- /dev/null
+++ b/k-tv-frontend/lib/channel-export.ts
@@ -0,0 +1,20 @@
+import type { ChannelResponse } from "@/lib/types";
+
+export function exportChannel(channel: ChannelResponse): void {
+  const payload = {
+    name: channel.name,
+    description: channel.description ?? undefined,
+    timezone: channel.timezone,
+    blocks: channel.schedule_config.blocks,
+    recycle_policy: channel.recycle_policy,
+  };
+  const blob = new Blob([JSON.stringify(payload, null, 2)], {
+    type: "application/json",
+  });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = `${channel.name.toLowerCase().replace(/\s+/g, "-")}.json`;
+  a.click();
+  URL.revokeObjectURL(url);
+}
diff --git a/k-tv-frontend/lib/schemas.ts b/k-tv-frontend/lib/schemas.ts
new file mode 100644
index 0000000..43ff6c9
--- /dev/null
+++ b/k-tv-frontend/lib/schemas.ts
@@ -0,0 +1,79 @@
+import { z } from "zod";
+
+export const mediaFilterSchema = z.object({
+  content_type: z.enum(["movie", "episode", "short"]).nullable().optional(),
+  genres: z.array(z.string()),
+  decade: z
+    .number()
+    .int()
+    .min(1900, "Decade must be ≥ 1900")
+    .max(2099, "Decade must be ≤ 2090")
+    .nullable()
+    .optional(),
+  tags: z.array(z.string()),
+  min_duration_secs: z.number().min(0, "Must be ≥ 0").nullable().optional(),
+  max_duration_secs: z.number().min(0, "Must be ≥ 0").nullable().optional(),
+  collections: z.array(z.string()),
+  series_names: z.array(z.string()),
+  search_term: z.string().nullable().optional(),
+});
+
+export const accessModeSchema = z.enum([
+  "public",
+  "password_protected",
+  "account_required",
+  "owner_only",
+]);
+
+export const blockSchema = z.object({
+  id: z.string(),
+  name: z.string().min(1, "Block name is required"),
+  start_time: z.string(),
+  duration_mins: z.number().int().min(1, "Must be at least 1 minute"),
+  content: z.discriminatedUnion("type", [
+    z.object({
+      type: z.literal("algorithmic"),
+      filter: mediaFilterSchema,
+      strategy: z.enum(["best_fit", "sequential", "random"]),
+      provider_id: z.string().optional(),
+    }),
+    z.object({
+      type: z.literal("manual"),
+      items: z.array(z.string()),
+      provider_id: z.string().optional(),
+    }),
+  ]),
+  loop_on_finish: z.boolean().optional(),
+  ignore_recycle_policy: z.boolean().optional(),
+  access_mode: accessModeSchema.optional(),
+  access_password: z.string().optional(),
+});
+
+export const channelFormSchema = z.object({
+  name: z.string().min(1, "Name is required"),
+  timezone: z.string().min(1, "Timezone is required"),
+  description: z.string().optional(),
+  blocks: z.array(blockSchema),
+  recycle_policy: z.object({
+    cooldown_days: z.number().int().min(0).nullable().optional(),
+    cooldown_generations: z.number().int().min(0).nullable().optional(),
+    min_available_ratio: z
+      .number()
+      .min(0, "Must be ≥ 0")
+      .max(1, "Must be ≤ 1"),
+  }),
+  auto_schedule: z.boolean(),
+  access_mode: accessModeSchema.optional(),
+  access_password: z.string().optional(),
+});
+
+export type FieldErrors = Record<string, string | undefined>;
+
+export function extractErrors(err: z.ZodError): FieldErrors {
+  const map: FieldErrors = {};
+  for (const issue of err.issues) {
+    const key = issue.path.join(".");
+    if (!map[key]) map[key] = issue.message;
+  }
+  return map;
+}