diff --git a/web/src/components/admin/libraries/LibraryEditorDialog.tsx b/web/src/components/admin/libraries/LibraryEditorDialog.tsx
new file mode 100644
index 00000000..825b4038
--- /dev/null
+++ b/web/src/components/admin/libraries/LibraryEditorDialog.tsx
@@ -0,0 +1,226 @@
+import { useState } from "react";
+import type { FormEvent } from "react";
+import { Database, FolderOpen, Settings2, SlidersHorizontal } from "lucide-react";
+
+import type { Library } from "@/api/types";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { cn } from "@/lib/utils";
+
+import { AdvancedFields, FolderFields, GeneralFields, MetadataFields } from "./LibraryFormSections";
+import { libraryTypeMeta } from "./libraryTypes";
+import { LibraryPosterSection } from "./LibraryPosterSection";
+import { useLibraryForm } from "./useLibraryForm";
+import type { LibraryFormErrors } from "./useLibraryForm";
+
+type SectionId = "general" | "folders" | "metadata" | "advanced";
+
+const SECTIONS: Array<{
+  id: SectionId;
+  label: string;
+  icon: typeof Settings2;
+  title: string;
+  description: string;
+}> = [
+  {
+    id: "general",
+    label: "General",
+    icon: Settings2,
+    title: "General",
+    description: "Name this library and choose the kind of media it holds.",
+  },
+  {
+    id: "folders",
+    label: "Folders",
+    icon: FolderOpen,
+    title: "Folders",
+    description: "Silo scans these folders for media and watches them for changes.",
+  },
+  {
+    id: "metadata",
+    label: "Metadata",
+    icon: Database,
+    title: "Metadata",
+    description: "Control where artwork and descriptions come from, and in which language.",
+  },
+  {
+    id: "advanced",
+    label: "Advanced",
+    icon: SlidersHorizontal,
+    title: "Advanced",
+    description: "Optional background processing for this library.",
+  },
+];
+
+function sectionForErrors(errors: LibraryFormErrors): SectionId | null {
+  if (errors.name) return "general";
+  if (errors.paths) return "folders";
+  return null;
+}
+
+export interface LibraryEditorDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  library: Library | null;
+  chapterThumbnailsSupported: boolean;
+}
+
+export function LibraryEditorDialog({
+  open,
+  onOpenChange,
+  library,
+  chapterThumbnailsSupported,
+}: LibraryEditorDialogProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="flex h-[min(40rem,calc(100dvh-4rem))] flex-col gap-0 overflow-hidden p-0 sm:max-w-3xl">
+        <LibraryEditorBody
+          key={library?.id ?? "new"}
+          library={library}
+          chapterThumbnailsSupported={chapterThumbnailsSupported}
+          onClose={() => onOpenChange(false)}
+        />
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function LibraryEditorBody({
+  library,
+  chapterThumbnailsSupported,
+  onClose,
+}: {
+  library: Library | null;
+  chapterThumbnailsSupported: boolean;
+  onClose: () => void;
+}) {
+  const [section, setSection] = useState<SectionId>("general");
+  const form = useLibraryForm({ library, onClose });
+
+  const typeMeta = libraryTypeMeta(form.type);
+  const folderCount = form.paths.filter((p) => p.trim()).length;
+  const errorSections = new Set<SectionId>();
+  if (form.errors.name) errorSections.add("general");
+  if (form.errors.paths) errorSections.add("folders");
+
+  function handleSubmit(e: FormEvent) {
+    e.preventDefault();
+    const result = form.submit();
+    if (!result.ok) {
+      const target = sectionForErrors(result.errors);
+      if (target) setSection(target);
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="flex min-h-0 flex-1 flex-col">
+      <DialogHeader className="border-border shrink-0 border-b px-5 py-4 pr-12 sm:px-6 sm:pr-12">
+        <div className="flex items-center gap-3">
+          <div className="border-border bg-surface text-primary flex size-10 shrink-0 items-center justify-center rounded-xl border">
+            <typeMeta.icon className="size-5" />
+          </div>
+          <div className="min-w-0 space-y-0.5 text-left">
+            <DialogTitle>{library ? "Edit Library" : "Add Library"}</DialogTitle>
+            <DialogDescription className="truncate text-xs">
+              {library
+                ? `Configure how “${library.name}” is scanned and matched.`
+                : "Set up a new library from folders on your server."}
+            </DialogDescription>
+          </div>
+        </div>
+      </DialogHeader>
+
+      <Tabs
+        value={section}
+        onValueChange={(value) => setSection(value as SectionId)}
+        orientation="vertical"
+        className="min-h-0 flex-1 gap-0"
+      >
+        <div className="border-border shrink-0 overflow-y-auto border-r">
+          <TabsList className="w-13 flex-col items-stretch justify-start gap-1 rounded-none bg-transparent p-2 sm:w-44 sm:p-3">
+            {SECTIONS.map(({ id, label, icon: Icon }) => (
+              <TabsTrigger
+                key={id}
+                value={id}
+                className="h-auto shrink-0 justify-start gap-2.5 rounded-lg px-2.5 py-2 sm:px-3"
+              >
+                <Icon className="size-4 shrink-0" />
+                <span className="hidden sm:inline">{label}</span>
+                {errorSections.has(id) ? (
+                  <span
+                    className={cn(
+                      "bg-destructive size-1.5 rounded-full",
+                      "absolute top-1 right-1 sm:static sm:ml-auto",
+                    )}
+                  />
+                ) : id === "folders" && folderCount > 0 ? (
+                  <span className="text-muted-foreground ml-auto hidden font-mono text-[10px] tabular-nums sm:inline">
+                    {folderCount}
+                  </span>
+                ) : null}
+              </TabsTrigger>
+            ))}
+          </TabsList>
+        </div>
+        <div className="overlay-scroll min-h-0 flex-1 overflow-y-auto">
+          {SECTIONS.map(({ id, title, description }) => (
+            <TabsContent
+              key={id}
+              value={id}
+              className="animate-in fade-in-0 slide-in-from-right-1 px-5 py-5 duration-200 sm:px-6"
+            >
+              <div className="mb-5 space-y-1">
+                <h3 className="text-sm font-semibold">{title}</h3>
+                <p className="text-muted-foreground text-xs">{description}</p>
+              </div>
+              {id === "general" && (
+                <GeneralFields
+                  form={form}
+                  posterSlot={library ? <LibraryPosterSection library={library} /> : null}
+                />
+              )}
+              {id === "folders" && <FolderFields form={form} />}
+              {id === "metadata" && <MetadataFields form={form} />}
+              {id === "advanced" && (
+                <AdvancedFields
+                  form={form}
+                  chapterThumbnailsSupported={chapterThumbnailsSupported}
+                />
+              )}
+            </TabsContent>
+          ))}
+        </div>
+      </Tabs>
+
+      <div className="border-border flex shrink-0 items-center justify-end gap-2 border-t px-5 py-4 sm:px-6">
+        {errorSections.size > 0 ? (
+          <p className="text-destructive mr-auto text-xs">
+            {[form.errors.name, form.errors.paths].filter(Boolean).join(" ")}
+          </p>
+        ) : null}
+        <DialogClose asChild>
+          <Button type="button" variant="ghost">
+            Cancel
+          </Button>
+        </DialogClose>
+        <Button type="submit" disabled={form.isPending}>
+          {form.isPending
+            ? library
+              ? "Saving…"
+              : "Creating…"
+            : library
+              ? "Save Changes"
+              : "Create Library"}
+        </Button>
+      </div>
+    </form>
+  );
+}
diff --git a/web/src/components/admin/libraries/LibraryForm.tsx b/web/src/components/admin/libraries/LibraryForm.tsx
index cf946bf4..ad39b515 100644
--- a/web/src/components/admin/libraries/LibraryForm.tsx
+++ b/web/src/components/admin/libraries/LibraryForm.tsx
@@ -1,52 +1,10 @@
-import { useMemo, useState } from "react";
 import type { FormEvent, ReactNode } from "react";
-import {
-  ArrowDown,
-  ArrowUp,
-  ChevronDown,
-  ChevronRight,
-  FolderOpen,
-  Plus,
-  Trash2,
-} from "lucide-react";
 
-import type { CreateLibraryRequest, Library } from "@/api/types";
+import type { Library } from "@/api/types";
 import { Button } from "@/components/ui/button";
-import FolderBrowser from "@/components/FolderBrowser";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import PathAutocompleteInput from "@/components/PathAutocompleteInput";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { Switch } from "@/components/ui/switch";
-import {
-  useCreateLibrary,
-  useLibraryProviders,
-  useSetLibraryProviders,
-  useUpdateLibrary,
-} from "@/hooks/queries/admin/libraries";
-import { useAdminPlugins } from "@/hooks/queries/admin/plugins";
-import { cn } from "@/lib/utils";
-import { LANGUAGES } from "@/player/utils/languageNames";
 
-type LevelChainItem = {
-  plugin_installation_id: number;
-  capability_id: string;
-  provider_slug: string;
-  enabled: boolean;
-};
-
-type MetadataProvider = {
-  plugin_installation_id: number;
-  capability_id: string;
-  slug: string;
-  defaultPriority: Record<string, number>;
-};
+import { AdvancedFields, FolderFields, GeneralFields, MetadataFields } from "./LibraryFormSections";
+import { useLibraryForm } from "./useLibraryForm";
 
 export interface LibraryFormProps {
   library: Library | null;
@@ -56,189 +14,24 @@ export interface LibraryFormProps {
   resetAfterCreate?: boolean;
   submitLabel?: string;
   savingLabel?: string;
-  extraContent?: ReactNode;
 }
 
-function contentLevelsForType(libraryType: string): string[] {
-  switch (libraryType) {
-    case "series":
-      return ["series", "season", "episode"];
-    case "movies":
-      return ["movie"];
-    case "mixed":
-      return ["movie", "series", "season", "episode"];
-    case "audiobooks":
-      return ["audiobook"];
-    case "podcasts":
-      return ["podcast", "podcast_episode"];
-    default:
-      return [];
-  }
-}
-
-function buildDefaultLevelChains(
-  metadataProviders: MetadataProvider[],
-  libraryType: string,
-): Record<string, LevelChainItem[]> {
-  const defaultChain: Record<string, LevelChainItem[]> = {};
-  for (const level of contentLevelsForType(libraryType)) {
-    const sorted = [...metadataProviders].sort((a, b) => {
-      const pa = a.defaultPriority[level] ?? 0;
-      const pb = b.defaultPriority[level] ?? 0;
-      if ((pa === 0) !== (pb === 0)) return pa === 0 ? 1 : -1;
-      return pa - pb;
-    });
-    defaultChain[level] = sorted.map((provider) => ({
-      plugin_installation_id: provider.plugin_installation_id,
-      capability_id: provider.capability_id,
-      provider_slug: provider.slug,
-      enabled: (provider.defaultPriority[level] ?? 0) > 0,
-    }));
-  }
-  return defaultChain;
-}
-
-function buildLevelChainsFromServer(
-  currentChain: {
-    levels?: Record<
-      string,
-      Array<{
-        plugin_installation_id: number;
-        capability_id: string;
-        provider_slug: string;
-        enabled: boolean;
-      }>
-    >;
-  } | null,
-  metadataProviders: MetadataProvider[],
-  libraryType: string,
-): Record<string, LevelChainItem[]> {
-  const mapped: Record<string, LevelChainItem[]> = {};
-  if (currentChain?.levels) {
-    for (const [level, entries] of Object.entries(currentChain.levels)) {
-      mapped[level] = entries.map((entry) => ({
-        plugin_installation_id: entry.plugin_installation_id,
-        capability_id: entry.capability_id,
-        provider_slug: entry.provider_slug,
-        enabled: entry.enabled,
-      }));
-    }
-  }
-
-  const defaults = buildDefaultLevelChains(metadataProviders, libraryType);
-  for (const level of contentLevelsForType(libraryType)) {
-    if (!mapped[level] || mapped[level].length === 0) {
-      mapped[level] = defaults[level] ?? [];
-    }
-  }
-  return mapped;
-}
-
-function contentLevelLabel(level: string): string {
-  return level
-    .split("_")
-    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
-    .join(" ");
-}
-
-function buildProviderChainBody(activeLevelChains: Record<string, LevelChainItem[]>) {
-  return {
-    levels: Object.fromEntries(
-      Object.entries(activeLevelChains).map(([level, items]) => [
-        level,
-        items.map((item, i) => ({
-          plugin_installation_id: item.plugin_installation_id,
-          capability_id: item.capability_id,
-          priority: i,
-          enabled: item.enabled,
-        })),
-      ]),
-    ),
-  };
-}
-
-function ProviderLevelSection({
-  level,
-  items,
-  onReorder,
-  onToggleEnabled,
-}: {
-  level: string;
-  items: LevelChainItem[];
-  onReorder: (items: LevelChainItem[]) => void;
-  onToggleEnabled: (index: number) => void;
-}) {
-  const [collapsed, setCollapsed] = useState(false);
-
-  const moveItem = (index: number, direction: -1 | 1) => {
-    const newItems = [...items];
-    const target = index + direction;
-    if (target < 0 || target >= newItems.length) return;
-    [newItems[index], newItems[target]] = [newItems[target]!, newItems[index]!];
-    onReorder(newItems);
-  };
-
+function FormSection({ title, children }: { title: string; children: ReactNode }) {
   return (
-    <div className="mb-3">
-      <button
-        type="button"
-        onClick={() => setCollapsed(!collapsed)}
-        className="text-primary hover:text-primary/80 mb-1.5 flex items-center gap-1.5 text-xs font-semibold tracking-wider uppercase"
-      >
-        {collapsed ? <ChevronRight className="h-3 w-3" /> : <ChevronDown className="h-3 w-3" />}
-        {contentLevelLabel(level)}
-      </button>
-      {!collapsed && (
-        <div className="flex flex-col gap-1">
-          {items.map((item, i) => (
-            <div
-              key={`${item.plugin_installation_id}:${item.capability_id}`}
-              className={cn(
-                "flex items-center gap-2 rounded-md border px-2.5 py-1.5 text-sm",
-                item.enabled
-                  ? "border-border bg-muted text-foreground"
-                  : "border-border/50 bg-muted/30 text-muted-foreground",
-              )}
-            >
-              <input
-                type="checkbox"
-                checked={item.enabled}
-                onChange={() => onToggleEnabled(i)}
-                className="h-3.5 w-3.5"
-                style={{ accentColor: "var(--primary)" }}
-              />
-              <span className="flex-1 font-mono text-xs">{item.provider_slug}</span>
-              <div className="flex gap-0.5">
-                <Button
-                  type="button"
-                  variant="ghost"
-                  size="icon"
-                  className="h-5 w-5"
-                  disabled={i === 0}
-                  onClick={() => moveItem(i, -1)}
-                >
-                  <ArrowUp className="h-2.5 w-2.5" />
-                </Button>
-                <Button
-                  type="button"
-                  variant="ghost"
-                  size="icon"
-                  className="h-5 w-5"
-                  disabled={i === items.length - 1}
-                  onClick={() => moveItem(i, 1)}
-                >
-                  <ArrowDown className="h-2.5 w-2.5" />
-                </Button>
-              </div>
-              <span className="text-muted-foreground/70 font-mono text-[10px]">{i + 1}</span>
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
+    <section className="space-y-3">
+      <h3 className="text-muted-foreground text-xs font-semibold tracking-[0.1em] uppercase">
+        {title}
+      </h3>
+      {children}
+    </section>
   );
 }
 
+/**
+ * Inline (non-dialog) library form used by the setup wizard. The admin
+ * Libraries page uses LibraryEditorDialog, which renders the same sections
+ * behind a left-hand navigation rail.
+ */
 export function LibraryForm({
   library,
   chapterThumbnailsSupported,
@@ -247,324 +40,30 @@ export function LibraryForm({
   resetAfterCreate = false,
   submitLabel = "Save",
   savingLabel = "Saving...",
-  extraContent,
 }: LibraryFormProps) {
-  const [name, setName] = useState(library?.name ?? "");
-  const [paths, setPaths] = useState<string[]>(library?.paths?.length ? library.paths : [""]);
-  const [type, setType] = useState(library?.type ?? "movies");
-  const [enabled, setEnabled] = useState(library?.enabled ?? true);
-  const [metadataLanguage, setMetadataLanguage] = useState(library?.metadata_language ?? "en");
-  const [chapterThumbnailsEnabled, setChapterThumbnailsEnabled] = useState(
-    library?.chapter_thumbnails_enabled ?? false,
-  );
-  const [introDetectionEnabled, setIntroDetectionEnabled] = useState(
-    library?.intro_detection_enabled ?? false,
-  );
-  const [levelChains, setLevelChains] = useState<Record<string, LevelChainItem[]>>({});
-  const [chainDirty, setChainDirty] = useState(false);
-  const [browserOpen, setBrowserOpen] = useState(false);
+  const form = useLibraryForm({ library, onClose, onSaved, resetAfterCreate });
 
-  const createMutation = useCreateLibrary();
-  const updateMutation = useUpdateLibrary();
-  const setChainMutation = useSetLibraryProviders();
-  const { installations } = useAdminPlugins();
-  const { data: currentChain } = useLibraryProviders(library?.id ?? null);
-
-  const metadataProviders = useMemo(() => {
-    const result: MetadataProvider[] = [];
-    for (const inst of installations) {
-      if (!inst.enabled) continue;
-      for (const cap of inst.capabilities ?? []) {
-        if (cap.type === "metadata_provider.v1") {
-          const dp =
-            (cap.metadata?.default_priority as Record<string, number>) ??
-            ((cap.metadata?.metadata as Record<string, unknown>)?.default_priority as Record<
-              string,
-              number
-            >) ??
-            {};
-          result.push({
-            plugin_installation_id: inst.id,
-            capability_id: cap.id,
-            slug: cap.display_name || cap.id,
-            defaultPriority: dp,
-          });
-        }
-      }
-    }
-    return result;
-  }, [installations]);
-
-  const isPending =
-    createMutation.isPending || updateMutation.isPending || setChainMutation.isPending;
-
-  const defaultLevelChains = useMemo(
-    () => buildDefaultLevelChains(metadataProviders, type),
-    [metadataProviders, type],
-  );
-  const resolvedLevelChains = useMemo(() => {
-    if (!library) {
-      return defaultLevelChains;
-    }
-    if (currentChain === undefined) {
-      return levelChains;
-    }
-    return buildLevelChainsFromServer(currentChain, metadataProviders, type);
-  }, [currentChain, defaultLevelChains, levelChains, library, metadataProviders, type]);
-  const activeLevelChains = chainDirty ? levelChains : resolvedLevelChains;
-
-  function updatePath(index: number, value: string) {
-    const next = [...paths];
-    next[index] = value;
-    setPaths(next);
-  }
-
-  function addPath() {
-    setPaths([...paths, ""]);
-  }
-
-  function removePath(index: number) {
-    setPaths(paths.filter((_, i) => i !== index));
-  }
-
-  function handleBrowseSelect(selectedPaths: string[]) {
-    const merged = [...paths.filter((path) => path.trim())];
-    for (const selectedPath of selectedPaths) {
-      if (!merged.includes(selectedPath)) {
-        merged.push(selectedPath);
-      }
-    }
-    setPaths(merged.length > 0 ? merged : [""]);
-    setBrowserOpen(false);
-  }
-
-  function handleTypeChange(newType: string) {
-    setType(newType);
-    if (!library) {
-      setLevelChains(buildDefaultLevelChains(metadataProviders, newType));
-      setChainDirty(true);
-    }
-  }
-
-  function finishCreate(created: Library) {
-    onSaved?.(created);
-    if (resetAfterCreate) {
-      setName("");
-      setPaths([""]);
-    } else {
-      onClose?.();
-    }
-  }
-
-  async function handleSubmit(e: FormEvent) {
+  function handleSubmit(e: FormEvent) {
     e.preventDefault();
-    const filteredPaths = paths.filter((p) => p.trim());
-    if (filteredPaths.length === 0) return;
-
-    const body: CreateLibraryRequest = {
-      name,
-      paths: filteredPaths,
-      type,
-      enabled,
-      metadata_language: metadataLanguage,
-      chapter_thumbnails_enabled: chapterThumbnailsEnabled,
-      intro_detection_enabled: introDetectionEnabled,
-    };
-
-    if (library) {
-      updateMutation.mutate(
-        { id: library.id, body },
-        {
-          onSuccess: () => {
-            if (chainDirty) {
-              setChainMutation.mutate(
-                {
-                  id: library.id,
-                  body: buildProviderChainBody(activeLevelChains),
-                },
-                { onSuccess: () => onClose?.() },
-              );
-            } else {
-              onClose?.();
-            }
-          },
-        },
-      );
-      return;
-    }
-
-    createMutation.mutate(body, {
-      onSuccess: (created) => {
-        if (chainDirty) {
-          setChainMutation.mutate(
-            {
-              id: created.id,
-              body: buildProviderChainBody(activeLevelChains),
-            },
-            { onSuccess: () => finishCreate(created) },
-          );
-        } else {
-          finishCreate(created);
-        }
-      },
-    });
+    form.submit();
   }
 
   return (
-    <form onSubmit={handleSubmit} className="space-y-3">
-      <div className="grid grid-cols-[1fr_auto] items-end gap-3">
-        <div className="space-y-1.5">
-          <Label>Name</Label>
-          <Input value={name} onChange={(e) => setName(e.target.value)} required />
-        </div>
-        <div className="flex items-center gap-2 pb-0.5">
-          <Switch id="enabled-switch" checked={enabled} onCheckedChange={setEnabled} />
-          <Label htmlFor="enabled-switch" className="text-muted-foreground text-xs">
-            Enabled
-          </Label>
-        </div>
-      </div>
-      <div className="space-y-1.5">
-        <Label>Paths</Label>
-        {paths.map((p, i) => (
-          <div key={i} className="flex gap-1">
-            <PathAutocompleteInput
-              value={p}
-              onValueChange={(value) => updatePath(i, value)}
-              placeholder="/mnt/media/movies"
-              required
-            />
-            {paths.length > 1 && (
-              <Button
-                type="button"
-                variant="ghost"
-                size="icon"
-                className="h-9 w-9 shrink-0"
-                onClick={() => removePath(i)}
-              >
-                <Trash2 className="h-3.5 w-3.5" />
-              </Button>
-            )}
-          </div>
-        ))}
-        <div className="flex gap-1">
-          <Button type="button" variant="outline" size="sm" onClick={addPath}>
-            <Plus className="mr-1 h-3.5 w-3.5" /> Add Path
-          </Button>
-          <Button type="button" variant="outline" size="sm" onClick={() => setBrowserOpen(true)}>
-            <FolderOpen className="mr-1 h-3.5 w-3.5" /> Browse
-          </Button>
-        </div>
-        <FolderBrowser
-          open={browserOpen}
-          onOpenChange={setBrowserOpen}
-          onSelect={handleBrowseSelect}
-          existingPaths={paths.filter((path) => path.trim())}
-        />
-      </div>
-      <div className="grid grid-cols-2 items-end gap-3">
-        <div className="space-y-1.5">
-          <Label>Type</Label>
-          <Select value={type} onValueChange={handleTypeChange}>
-            <SelectTrigger>
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="movies">Movies</SelectItem>
-              <SelectItem value="series">Series</SelectItem>
-              <SelectItem value="mixed">Mixed</SelectItem>
-              <SelectItem value="audiobooks">Audiobooks</SelectItem>
-              <SelectItem value="podcasts">Podcasts</SelectItem>
-            </SelectContent>
-          </Select>
-        </div>
-        <div className="space-y-1.5">
-          <Label>Metadata Language</Label>
-          <Select value={metadataLanguage} onValueChange={setMetadataLanguage}>
-            <SelectTrigger>
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              {LANGUAGES.map((lang) => (
-                <SelectItem key={lang.code} value={lang.code}>
-                  {lang.label}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>
-      </div>
-      <div className="rounded-xl border border-white/10 bg-white/5 p-3">
-        <div className="flex items-start justify-between gap-3">
-          <div className="space-y-1">
-            <Label htmlFor="chapter-thumbnails-switch">Generate chapter thumbnails</Label>
-            <p className="text-xs text-white/60">
-              Stores chapter preview images in the configured public asset S3 bucket. Chapter
-              markers and chapter menus still work without thumbnails.
-            </p>
-            {!chapterThumbnailsSupported ? (
-              <p className="text-xs text-amber-300">
-                Public asset S3 storage is required before this can be enabled.
-              </p>
-            ) : null}
-          </div>
-          <Switch
-            id="chapter-thumbnails-switch"
-            checked={chapterThumbnailsEnabled}
-            disabled={!chapterThumbnailsSupported}
-            onCheckedChange={setChapterThumbnailsEnabled}
-          />
-        </div>
-      </div>
-      <div className="rounded-xl border border-white/10 bg-white/5 p-3">
-        <div className="flex items-start justify-between gap-3">
-          <div className="space-y-1">
-            <Label htmlFor="intro-detection-switch">Detect intro markers</Label>
-            <p className="text-xs text-white/60">
-              Runs background audio analysis for episodes in this library. Embedded intro chapters
-              are used when available.
-            </p>
-          </div>
-          <Switch
-            id="intro-detection-switch"
-            checked={introDetectionEnabled}
-            onCheckedChange={setIntroDetectionEnabled}
-          />
-        </div>
-      </div>
-      {extraContent}
-
-      {contentLevelsForType(type).length > 0 && (
-        <div className="mt-4 border-t border-white/10 pt-4">
-          <h3 className="mb-3 text-sm font-semibold text-white">Metadata Providers</h3>
-          {contentLevelsForType(type).map((level) => {
-            const items = activeLevelChains[level] ?? [];
-            return (
-              <ProviderLevelSection
-                key={level}
-                level={level}
-                items={items}
-                onReorder={(newItems) => {
-                  setLevelChains({ ...activeLevelChains, [level]: newItems });
-                  setChainDirty(true);
-                }}
-                onToggleEnabled={(index) => {
-                  setLevelChains((prev) => {
-                    const source = prev[level] ?? activeLevelChains[level] ?? [];
-                    const updated = [...source];
-                    updated[index] = { ...updated[index]!, enabled: !updated[index]!.enabled };
-                    return { ...prev, [level]: updated };
-                  });
-                  setChainDirty(true);
-                }}
-              />
-            );
-          })}
-        </div>
-      )}
-
-      <Button type="submit" className="w-full" disabled={isPending}>
-        {isPending ? savingLabel : submitLabel}
+    <form onSubmit={handleSubmit} className="space-y-6">
+      <FormSection title="General">
+        <GeneralFields form={form} />
+      </FormSection>
+      <FormSection title="Folders">
+        <FolderFields form={form} />
+      </FormSection>
+      <FormSection title="Metadata">
+        <MetadataFields form={form} />
+      </FormSection>
+      <FormSection title="Advanced">
+        <AdvancedFields form={form} chapterThumbnailsSupported={chapterThumbnailsSupported} />
+      </FormSection>
+      <Button type="submit" className="w-full" disabled={form.isPending}>
+        {form.isPending ? savingLabel : submitLabel}
       </Button>
     </form>
   );
diff --git a/web/src/components/admin/libraries/LibraryFormSections.tsx b/web/src/components/admin/libraries/LibraryFormSections.tsx
new file mode 100644
index 00000000..b9c2d895
--- /dev/null
+++ b/web/src/components/admin/libraries/LibraryFormSections.tsx
@@ -0,0 +1,359 @@
+import { useState } from "react";
+import type { ReactNode } from "react";
+import {
+  ArrowDown,
+  ArrowUp,
+  ChevronDown,
+  ChevronRight,
+  FolderOpen,
+  FolderSearch,
+  Plus,
+  Trash2,
+} from "lucide-react";
+
+import FolderBrowser from "@/components/FolderBrowser";
+import PathAutocompleteInput from "@/components/PathAutocompleteInput";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import { cn } from "@/lib/utils";
+import { LANGUAGES } from "@/player/utils/languageNames";
+
+import { LIBRARY_TYPES } from "./libraryTypes";
+import { contentLevelLabel } from "./useLibraryForm";
+import type { LevelChainItem, LibraryFormController } from "./useLibraryForm";
+
+function SettingCard({
+  htmlFor,
+  title,
+  description,
+  children,
+  footer,
+}: {
+  htmlFor?: string;
+  title: string;
+  description: string;
+  children: ReactNode;
+  footer?: ReactNode;
+}) {
+  return (
+    <div className="border-border bg-surface rounded-xl border p-3.5">
+      <div className="flex items-start justify-between gap-4">
+        <div className="space-y-1">
+          <Label htmlFor={htmlFor}>{title}</Label>
+          <p className="text-muted-foreground text-xs leading-relaxed">{description}</p>
+          {footer}
+        </div>
+        {children}
+      </div>
+    </div>
+  );
+}
+
+export function GeneralFields({
+  form,
+  posterSlot,
+}: {
+  form: LibraryFormController;
+  posterSlot?: ReactNode;
+}) {
+  return (
+    <div className="space-y-5">
+      <div className="space-y-1.5">
+        <Label htmlFor="library-name">Name</Label>
+        <Input
+          id="library-name"
+          value={form.name}
+          onChange={(e) => form.setName(e.target.value)}
+          placeholder="e.g. Movies"
+          aria-invalid={form.errors.name ? true : undefined}
+        />
+        {form.errors.name ? <p className="text-destructive text-xs">{form.errors.name}</p> : null}
+      </div>
+      <div className="space-y-1.5">
+        <Label>Type</Label>
+        <div
+          className="grid grid-cols-3 gap-2 sm:grid-cols-5"
+          role="radiogroup"
+          aria-label="Library type"
+        >
+          {LIBRARY_TYPES.map(({ value, label, icon: Icon }) => {
+            const selected = form.type === value;
+            return (
+              <button
+                key={value}
+                type="button"
+                role="radio"
+                aria-checked={selected}
+                onClick={() => form.handleTypeChange(value)}
+                className={cn(
+                  "flex flex-col items-center gap-1.5 rounded-xl border px-2 py-3 transition-colors duration-150",
+                  selected
+                    ? "border-primary/50 bg-primary/10 text-foreground"
+                    : "border-border bg-surface text-muted-foreground hover:bg-surface-hover hover:text-foreground",
+                )}
+              >
+                <Icon
+                  className={cn("size-5", selected ? "text-primary" : "text-muted-foreground")}
+                />
+                <span className="text-[11px] font-medium">{label}</span>
+              </button>
+            );
+          })}
+        </div>
+        {form.library && form.type !== form.library.type ? (
+          <p className="text-warning text-xs">
+            Changing the type of an existing library may require a full rescan to rematch items.
+          </p>
+        ) : null}
+      </div>
+      <SettingCard
+        htmlFor="library-enabled-switch"
+        title="Enabled"
+        description="Disabled libraries are hidden from browsing and skipped by scans."
+      >
+        <Switch
+          id="library-enabled-switch"
+          checked={form.enabled}
+          onCheckedChange={form.setEnabled}
+        />
+      </SettingCard>
+      {posterSlot}
+    </div>
+  );
+}
+
+export function FolderFields({ form }: { form: LibraryFormController }) {
+  const [browserOpen, setBrowserOpen] = useState(false);
+
+  return (
+    <div className="space-y-3">
+      <div className="space-y-2">
+        {form.paths.map((path, i) => (
+          <div key={i} className="flex items-center gap-1.5">
+            <FolderOpen className="text-muted-foreground/60 size-4 shrink-0" />
+            <PathAutocompleteInput
+              value={path}
+              onValueChange={(value) => form.updatePath(i, value)}
+              placeholder="/mnt/media/movies"
+              aria-invalid={form.errors.paths ? true : undefined}
+            />
+            {form.paths.length > 1 && (
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon"
+                className="text-muted-foreground hover:text-destructive size-9 shrink-0"
+                onClick={() => form.removePath(i)}
+                title="Remove folder"
+              >
+                <Trash2 className="size-3.5" />
+              </Button>
+            )}
+          </div>
+        ))}
+      </div>
+      {form.errors.paths ? <p className="text-destructive text-xs">{form.errors.paths}</p> : null}
+      <div className="flex gap-1.5">
+        <Button type="button" variant="outline" size="sm" onClick={() => setBrowserOpen(true)}>
+          <FolderSearch className="mr-1 size-3.5" /> Browse
+        </Button>
+        <Button type="button" variant="outline" size="sm" onClick={form.addPath}>
+          <Plus className="mr-1 size-3.5" /> Add Path
+        </Button>
+      </div>
+      <FolderBrowser
+        open={browserOpen}
+        onOpenChange={setBrowserOpen}
+        onSelect={(selected) => {
+          form.mergeBrowsedPaths(selected);
+          setBrowserOpen(false);
+        }}
+        existingPaths={form.paths.filter((path) => path.trim())}
+      />
+    </div>
+  );
+}
+
+function ProviderLevelSection({
+  level,
+  items,
+  onReorder,
+  onToggleEnabled,
+}: {
+  level: string;
+  items: LevelChainItem[];
+  onReorder: (items: LevelChainItem[]) => void;
+  onToggleEnabled: (index: number) => void;
+}) {
+  const [collapsed, setCollapsed] = useState(false);
+
+  const moveItem = (index: number, direction: -1 | 1) => {
+    const newItems = [...items];
+    const target = index + direction;
+    if (target < 0 || target >= newItems.length) return;
+    [newItems[index], newItems[target]] = [newItems[target]!, newItems[index]!];
+    onReorder(newItems);
+  };
+
+  return (
+    <div className="mb-3">
+      <button
+        type="button"
+        onClick={() => setCollapsed(!collapsed)}
+        className="text-primary hover:text-primary/80 mb-1.5 flex items-center gap-1.5 text-xs font-semibold tracking-wider uppercase"
+      >
+        {collapsed ? <ChevronRight className="h-3 w-3" /> : <ChevronDown className="h-3 w-3" />}
+        {contentLevelLabel(level)}
+      </button>
+      {!collapsed && (
+        <div className="flex flex-col gap-1">
+          {items.map((item, i) => (
+            <div
+              key={`${item.plugin_installation_id}:${item.capability_id}`}
+              className={cn(
+                "flex items-center gap-2 rounded-md border px-2.5 py-1.5 text-sm",
+                item.enabled
+                  ? "border-border bg-muted text-foreground"
+                  : "border-border/50 bg-muted/30 text-muted-foreground",
+              )}
+            >
+              <input
+                type="checkbox"
+                checked={item.enabled}
+                onChange={() => onToggleEnabled(i)}
+                className="h-3.5 w-3.5"
+                style={{ accentColor: "var(--primary)" }}
+              />
+              <span className="flex-1 font-mono text-xs">{item.provider_slug}</span>
+              <div className="flex gap-0.5">
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon"
+                  className="h-5 w-5"
+                  disabled={i === 0}
+                  onClick={() => moveItem(i, -1)}
+                >
+                  <ArrowUp className="h-2.5 w-2.5" />
+                </Button>
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon"
+                  className="h-5 w-5"
+                  disabled={i === items.length - 1}
+                  onClick={() => moveItem(i, 1)}
+                >
+                  <ArrowDown className="h-2.5 w-2.5" />
+                </Button>
+              </div>
+              <span className="text-muted-foreground/70 font-mono text-[10px]">{i + 1}</span>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function MetadataFields({ form }: { form: LibraryFormController }) {
+  return (
+    <div className="space-y-5">
+      <div className="space-y-1.5">
+        <Label>Metadata Language</Label>
+        <Select value={form.metadataLanguage} onValueChange={form.setMetadataLanguage}>
+          <SelectTrigger className="w-full sm:w-64">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {LANGUAGES.map((lang) => (
+              <SelectItem key={lang.code} value={lang.code}>
+                {lang.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+        <p className="text-muted-foreground text-xs">
+          Preferred language for titles, summaries, and artwork fetched from providers.
+        </p>
+      </div>
+      {form.contentLevels.length > 0 && (
+        <div className="space-y-1.5">
+          <Label>Provider Priority</Label>
+          <p className="text-muted-foreground mb-3 text-xs">
+            Providers are asked in order from top to bottom. Uncheck a provider to skip it for that
+            level.
+          </p>
+          {form.hasMetadataProviders ? (
+            form.contentLevels.map((level) => (
+              <ProviderLevelSection
+                key={level}
+                level={level}
+                items={form.activeLevelChains[level] ?? []}
+                onReorder={(newItems) => form.reorderLevel(level, newItems)}
+                onToggleEnabled={(index) => form.toggleLevelProvider(level, index)}
+              />
+            ))
+          ) : (
+            <p className="border-border bg-surface text-muted-foreground rounded-xl border border-dashed p-4 text-center text-xs">
+              No metadata provider plugins are installed. Install one under Admin → Plugins to fetch
+              artwork and descriptions.
+            </p>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function AdvancedFields({
+  form,
+  chapterThumbnailsSupported,
+}: {
+  form: LibraryFormController;
+  chapterThumbnailsSupported: boolean;
+}) {
+  return (
+    <div className="space-y-3">
+      <SettingCard
+        htmlFor="chapter-thumbnails-switch"
+        title="Generate chapter thumbnails"
+        description="Stores chapter preview images in the configured public asset S3 bucket. Chapter markers and chapter menus still work without thumbnails."
+        footer={
+          !chapterThumbnailsSupported ? (
+            <p className="text-warning text-xs">
+              Public asset S3 storage is required before this can be enabled.
+            </p>
+          ) : null
+        }
+      >
+        <Switch
+          id="chapter-thumbnails-switch"
+          checked={form.chapterThumbnailsEnabled}
+          disabled={!chapterThumbnailsSupported}
+          onCheckedChange={form.setChapterThumbnailsEnabled}
+        />
+      </SettingCard>
+      <SettingCard
+        htmlFor="intro-detection-switch"
+        title="Detect intro markers"
+        description="Runs background audio analysis for episodes in this library. Embedded intro chapters are used when available."
+      >
+        <Switch
+          id="intro-detection-switch"
+          checked={form.introDetectionEnabled}
+          onCheckedChange={form.setIntroDetectionEnabled}
+        />
+      </SettingCard>
+    </div>
+  );
+}
diff --git a/web/src/components/admin/libraries/LibraryPosterSection.tsx b/web/src/components/admin/libraries/LibraryPosterSection.tsx
new file mode 100644
index 00000000..cd945dac
--- /dev/null
+++ b/web/src/components/admin/libraries/LibraryPosterSection.tsx
@@ -0,0 +1,73 @@
+import type { ChangeEvent } from "react";
+import { ImageIcon, Trash2 } from "lucide-react";
+
+import type { Library } from "@/api/types";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { useDeleteLibraryPoster, useUploadLibraryPoster } from "@/hooks/queries/admin/libraries";
+
+export function LibraryPosterSection({ library }: { library: Library }) {
+  const uploadMutation = useUploadLibraryPoster();
+  const deleteMutation = useDeleteLibraryPoster();
+  const fileInputId = `poster-upload-${library.id}`;
+
+  function handleFileChange(e: ChangeEvent<HTMLInputElement>) {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    uploadMutation.mutate({ id: library.id, file });
+    e.target.value = "";
+  }
+
+  return (
+    <div className="space-y-1.5">
+      <Label>Poster</Label>
+      <div className="flex items-center gap-2">
+        {library.poster_url ? (
+          <img
+            src={library.poster_url}
+            alt={`${library.name} poster`}
+            className="border-border h-14 flex-shrink-0 rounded border object-cover"
+            style={{ aspectRatio: "16/9" }}
+          />
+        ) : (
+          <div
+            className="border-border bg-muted/30 flex h-14 flex-shrink-0 items-center justify-center rounded border border-dashed"
+            style={{ aspectRatio: "16/9" }}
+          >
+            <ImageIcon className="text-muted-foreground/40 h-4 w-4" />
+          </div>
+        )}
+        <input
+          id={fileInputId}
+          type="file"
+          accept="image/jpeg,image/png,image/webp"
+          className="hidden"
+          onChange={handleFileChange}
+        />
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          className="h-8 text-xs"
+          onClick={() => document.getElementById(fileInputId)?.click()}
+          disabled={uploadMutation.isPending}
+        >
+          {uploadMutation.isPending ? "..." : library.poster_url ? "Replace" : "Upload"}
+        </Button>
+        {library.poster_url && (
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            className="text-muted-foreground hover:text-destructive h-8 w-8"
+            onClick={() => deleteMutation.mutate(library.id)}
+            disabled={deleteMutation.isPending}
+            title="Remove poster"
+          >
+            <Trash2 className="h-3 w-3" />
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/web/src/components/admin/libraries/libraryTypes.ts b/web/src/components/admin/libraries/libraryTypes.ts
new file mode 100644
index 00000000..30f1c406
--- /dev/null
+++ b/web/src/components/admin/libraries/libraryTypes.ts
@@ -0,0 +1,13 @@
+import { BookHeadphones, Film, Layers, Podcast, Tv } from "lucide-react";
+
+export const LIBRARY_TYPES = [
+  { value: "movies", label: "Movies", icon: Film },
+  { value: "series", label: "Series", icon: Tv },
+  { value: "mixed", label: "Mixed", icon: Layers },
+  { value: "audiobooks", label: "Audiobooks", icon: BookHeadphones },
+  { value: "podcasts", label: "Podcasts", icon: Podcast },
+] as const;
+
+export function libraryTypeMeta(type: string) {
+  return LIBRARY_TYPES.find((t) => t.value === type) ?? LIBRARY_TYPES[0];
+}
diff --git a/web/src/components/admin/libraries/useLibraryForm.ts b/web/src/components/admin/libraries/useLibraryForm.ts
new file mode 100644
index 00000000..4024ede1
--- /dev/null
+++ b/web/src/components/admin/libraries/useLibraryForm.ts
@@ -0,0 +1,358 @@
+import { useMemo, useState } from "react";
+
+import type { CreateLibraryRequest, Library } from "@/api/types";
+import {
+  useCreateLibrary,
+  useLibraryProviders,
+  useSetLibraryProviders,
+  useUpdateLibrary,
+} from "@/hooks/queries/admin/libraries";
+import { useAdminPlugins } from "@/hooks/queries/admin/plugins";
+
+export type LevelChainItem = {
+  plugin_installation_id: number;
+  capability_id: string;
+  provider_slug: string;
+  enabled: boolean;
+};
+
+type MetadataProvider = {
+  plugin_installation_id: number;
+  capability_id: string;
+  slug: string;
+  defaultPriority: Record<string, number>;
+};
+
+export interface LibraryFormErrors {
+  name?: string;
+  paths?: string;
+}
+
+export interface UseLibraryFormOptions {
+  library: Library | null;
+  onClose?: () => void;
+  onSaved?: (library: Library) => void;
+  resetAfterCreate?: boolean;
+}
+
+export function contentLevelsForType(libraryType: string): string[] {
+  switch (libraryType) {
+    case "series":
+      return ["series", "season", "episode"];
+    case "movies":
+      return ["movie"];
+    case "mixed":
+      return ["movie", "series", "season", "episode"];
+    case "audiobooks":
+      return ["audiobook"];
+    case "podcasts":
+      return ["podcast", "podcast_episode"];
+    default:
+      return [];
+  }
+}
+
+export function contentLevelLabel(level: string): string {
+  return level
+    .split("_")
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join(" ");
+}
+
+function buildDefaultLevelChains(
+  metadataProviders: MetadataProvider[],
+  libraryType: string,
+): Record<string, LevelChainItem[]> {
+  const defaultChain: Record<string, LevelChainItem[]> = {};
+  for (const level of contentLevelsForType(libraryType)) {
+    const sorted = [...metadataProviders].sort((a, b) => {
+      const pa = a.defaultPriority[level] ?? 0;
+      const pb = b.defaultPriority[level] ?? 0;
+      if ((pa === 0) !== (pb === 0)) return pa === 0 ? 1 : -1;
+      return pa - pb;
+    });
+    defaultChain[level] = sorted.map((provider) => ({
+      plugin_installation_id: provider.plugin_installation_id,
+      capability_id: provider.capability_id,
+      provider_slug: provider.slug,
+      enabled: (provider.defaultPriority[level] ?? 0) > 0,
+    }));
+  }
+  return defaultChain;
+}
+
+function buildLevelChainsFromServer(
+  currentChain: {
+    levels?: Record<
+      string,
+      Array<{
+        plugin_installation_id: number;
+        capability_id: string;
+        provider_slug: string;
+        enabled: boolean;
+      }>
+    >;
+  } | null,
+  metadataProviders: MetadataProvider[],
+  libraryType: string,
+): Record<string, LevelChainItem[]> {
+  const mapped: Record<string, LevelChainItem[]> = {};
+  if (currentChain?.levels) {
+    for (const [level, entries] of Object.entries(currentChain.levels)) {
+      mapped[level] = entries.map((entry) => ({
+        plugin_installation_id: entry.plugin_installation_id,
+        capability_id: entry.capability_id,
+        provider_slug: entry.provider_slug,
+        enabled: entry.enabled,
+      }));
+    }
+  }
+
+  const defaults = buildDefaultLevelChains(metadataProviders, libraryType);
+  for (const level of contentLevelsForType(libraryType)) {
+    if (!mapped[level] || mapped[level].length === 0) {
+      mapped[level] = defaults[level] ?? [];
+    }
+  }
+  return mapped;
+}
+
+function buildProviderChainBody(activeLevelChains: Record<string, LevelChainItem[]>) {
+  return {
+    levels: Object.fromEntries(
+      Object.entries(activeLevelChains).map(([level, items]) => [
+        level,
+        items.map((item, i) => ({
+          plugin_installation_id: item.plugin_installation_id,
+          capability_id: item.capability_id,
+          priority: i,
+          enabled: item.enabled,
+        })),
+      ]),
+    ),
+  };
+}
+
+export function useLibraryForm({
+  library,
+  onClose,
+  onSaved,
+  resetAfterCreate = false,
+}: UseLibraryFormOptions) {
+  const [name, setName] = useState(library?.name ?? "");
+  const [paths, setPaths] = useState<string[]>(library?.paths?.length ? library.paths : [""]);
+  const [type, setType] = useState(library?.type ?? "movies");
+  const [enabled, setEnabled] = useState(library?.enabled ?? true);
+  const [metadataLanguage, setMetadataLanguage] = useState(library?.metadata_language ?? "en");
+  const [chapterThumbnailsEnabled, setChapterThumbnailsEnabled] = useState(
+    library?.chapter_thumbnails_enabled ?? false,
+  );
+  const [introDetectionEnabled, setIntroDetectionEnabled] = useState(
+    library?.intro_detection_enabled ?? false,
+  );
+  const [levelChains, setLevelChains] = useState<Record<string, LevelChainItem[]>>({});
+  const [chainDirty, setChainDirty] = useState(false);
+  const [submitAttempted, setSubmitAttempted] = useState(false);
+
+  const createMutation = useCreateLibrary();
+  const updateMutation = useUpdateLibrary();
+  const setChainMutation = useSetLibraryProviders();
+  const { installations } = useAdminPlugins();
+  const { data: currentChain } = useLibraryProviders(library?.id ?? null);
+
+  const metadataProviders = useMemo(() => {
+    const result: MetadataProvider[] = [];
+    for (const inst of installations) {
+      if (!inst.enabled) continue;
+      for (const cap of inst.capabilities ?? []) {
+        if (cap.type === "metadata_provider.v1") {
+          const dp =
+            (cap.metadata?.default_priority as Record<string, number>) ??
+            ((cap.metadata?.metadata as Record<string, unknown>)?.default_priority as Record<
+              string,
+              number
+            >) ??
+            {};
+          result.push({
+            plugin_installation_id: inst.id,
+            capability_id: cap.id,
+            slug: cap.display_name || cap.id,
+            defaultPriority: dp,
+          });
+        }
+      }
+    }
+    return result;
+  }, [installations]);
+
+  const isPending =
+    createMutation.isPending || updateMutation.isPending || setChainMutation.isPending;
+
+  const defaultLevelChains = useMemo(
+    () => buildDefaultLevelChains(metadataProviders, type),
+    [metadataProviders, type],
+  );
+  const resolvedLevelChains = useMemo(() => {
+    if (!library) {
+      return defaultLevelChains;
+    }
+    if (currentChain === undefined) {
+      return levelChains;
+    }
+    return buildLevelChainsFromServer(currentChain, metadataProviders, type);
+  }, [currentChain, defaultLevelChains, levelChains, library, metadataProviders, type]);
+  const activeLevelChains = chainDirty ? levelChains : resolvedLevelChains;
+
+  const allErrors = useMemo<LibraryFormErrors>(() => {
+    const next: LibraryFormErrors = {};
+    if (!name.trim()) next.name = "Give this library a name.";
+    if (!paths.some((p) => p.trim())) next.paths = "Add at least one folder to scan.";
+    return next;
+  }, [name, paths]);
+  const errors: LibraryFormErrors = submitAttempted ? allErrors : {};
+
+  function updatePath(index: number, value: string) {
+    const next = [...paths];
+    next[index] = value;
+    setPaths(next);
+  }
+
+  function addPath() {
+    setPaths([...paths, ""]);
+  }
+
+  function removePath(index: number) {
+    setPaths(paths.filter((_, i) => i !== index));
+  }
+
+  function mergeBrowsedPaths(selectedPaths: string[]) {
+    const merged = [...paths.filter((path) => path.trim())];
+    for (const selectedPath of selectedPaths) {
+      if (!merged.includes(selectedPath)) {
+        merged.push(selectedPath);
+      }
+    }
+    setPaths(merged.length > 0 ? merged : [""]);
+  }
+
+  function handleTypeChange(newType: string) {
+    setType(newType);
+    if (!library) {
+      setLevelChains(buildDefaultLevelChains(metadataProviders, newType));
+      setChainDirty(true);
+    }
+  }
+
+  function reorderLevel(level: string, items: LevelChainItem[]) {
+    setLevelChains({ ...activeLevelChains, [level]: items });
+    setChainDirty(true);
+  }
+
+  function toggleLevelProvider(level: string, index: number) {
+    setLevelChains((prev) => {
+      const source = prev[level] ?? activeLevelChains[level] ?? [];
+      const updated = [...source];
+      updated[index] = { ...updated[index]!, enabled: !updated[index]!.enabled };
+      return { ...prev, [level]: updated };
+    });
+    setChainDirty(true);
+  }
+
+  function finishCreate(created: Library) {
+    onSaved?.(created);
+    if (resetAfterCreate) {
+      setName("");
+      setPaths([""]);
+      setSubmitAttempted(false);
+    } else {
+      onClose?.();
+    }
+  }
+
+  function submit(): { ok: boolean; errors: LibraryFormErrors } {
+    setSubmitAttempted(true);
+    if (allErrors.name || allErrors.paths) {
+      return { ok: false, errors: allErrors };
+    }
+
+    const body: CreateLibraryRequest = {
+      name: name.trim(),
+      paths: paths.filter((p) => p.trim()),
+      type,
+      enabled,
+      metadata_language: metadataLanguage,
+      chapter_thumbnails_enabled: chapterThumbnailsEnabled,
+      intro_detection_enabled: introDetectionEnabled,
+    };
+
+    if (library) {
+      updateMutation.mutate(
+        { id: library.id, body },
+        {
+          onSuccess: () => {
+            if (chainDirty) {
+              setChainMutation.mutate(
+                {
+                  id: library.id,
+                  body: buildProviderChainBody(activeLevelChains),
+                },
+                { onSuccess: () => onClose?.() },
+              );
+            } else {
+              onClose?.();
+            }
+          },
+        },
+      );
+      return { ok: true, errors: {} };
+    }
+
+    createMutation.mutate(body, {
+      onSuccess: (created) => {
+        if (chainDirty) {
+          setChainMutation.mutate(
+            {
+              id: created.id,
+              body: buildProviderChainBody(activeLevelChains),
+            },
+            { onSuccess: () => finishCreate(created) },
+          );
+        } else {
+          finishCreate(created);
+        }
+      },
+    });
+    return { ok: true, errors: {} };
+  }
+
+  return {
+    library,
+    name,
+    setName,
+    paths,
+    updatePath,
+    addPath,
+    removePath,
+    mergeBrowsedPaths,
+    type,
+    handleTypeChange,
+    enabled,
+    setEnabled,
+    metadataLanguage,
+    setMetadataLanguage,
+    chapterThumbnailsEnabled,
+    setChapterThumbnailsEnabled,
+    introDetectionEnabled,
+    setIntroDetectionEnabled,
+    contentLevels: contentLevelsForType(type),
+    activeLevelChains,
+    reorderLevel,
+    toggleLevelProvider,
+    hasMetadataProviders: metadataProviders.length > 0,
+    errors,
+    isPending,
+    submit,
+  };
+}
+
+export type LibraryFormController = ReturnType<typeof useLibraryForm>;
diff --git a/web/src/pages/AdminLibraries.tsx b/web/src/pages/AdminLibraries.tsx
index 14170626..5e7ef3b3 100644
--- a/web/src/pages/AdminLibraries.tsx
+++ b/web/src/pages/AdminLibraries.tsx
@@ -29,15 +29,13 @@ import {
   useRefreshLibraryMetadata,
   useCancelAdminJob,
   useConfirmEmptyRootCleanup,
-  useUploadLibraryPoster,
-  useDeleteLibraryPoster,
   useUnmatchedLibraryItems,
   UNMATCHED_PAGE_SIZE,
 } from "@/hooks/queries/admin/libraries";
 import { useActiveScans } from "@/hooks/queries/admin/scans";
 import { buildLibraryReorderEntries } from "./adminLibraryOrder";
 import MatchItemDialog from "@/components/MatchItemDialog";
-import { LibraryForm } from "@/components/admin/libraries/LibraryForm";
+import { LibraryEditorDialog } from "@/components/admin/libraries/LibraryEditorDialog";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
@@ -56,7 +54,6 @@ import {
   DialogHeader,
   DialogDescription,
   DialogTitle,
-  DialogTrigger,
 } from "@/components/ui/dialog";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import {
@@ -78,7 +75,6 @@ import {
   GripVertical,
   Wrench,
   HardDrive,
-  ImageIcon,
   ChevronLeft,
   ChevronRight,
   ChevronsLeft,
@@ -348,48 +344,28 @@ export default function AdminLibraries() {
               Catalog Maintenance
             </Link>
           </Button>
-          <Dialog
+          <Button
+            size="sm"
+            onClick={() => {
+              setEditingLib(null);
+              setDialogOpen(true);
+            }}
+          >
+            <Plus className="mr-1 h-4 w-4" /> Add Library
+          </Button>
+          <LibraryEditorDialog
             open={dialogOpen}
             onOpenChange={(open) => {
               setDialogOpen(open);
               if (!open) setEditingLib(null);
             }}
-          >
-            <DialogTrigger asChild>
-              <Button size="sm">
-                <Plus className="mr-1 h-4 w-4" /> Add Library
-              </Button>
-            </DialogTrigger>
-            <DialogContent>
-              <DialogHeader>
-                <DialogTitle>{editingLib ? "Edit Library" : "Add Library"}</DialogTitle>
-                <DialogDescription>
-                  Configure scan roots, metadata sources, and optional chapter thumbnails for this
-                  library.
-                </DialogDescription>
-              </DialogHeader>
-              <LibraryForm
-                key={editingLib?.id ?? "new"}
-                library={editingLib}
-                chapterThumbnailsSupported={
-                  editingLib?.chapter_thumbnails_supported ??
-                  libraries[0]?.chapter_thumbnails_supported ??
-                  true
-                }
-                onClose={() => {
-                  setDialogOpen(false);
-                  setEditingLib(null);
-                }}
-                extraContent={
-                  editingLib ? (
-                    <div>
-                      <LibraryPosterSection library={editingLib} />
-                    </div>
-                  ) : null
-                }
-              />
-            </DialogContent>
-          </Dialog>
+            library={editingLib}
+            chapterThumbnailsSupported={
+              editingLib?.chapter_thumbnails_supported ??
+              libraries[0]?.chapter_thumbnails_supported ??
+              true
+            }
+          />
         </div>
       </div>
 
@@ -2082,69 +2058,3 @@ function StaleIDsSection({ staleIDs }: { staleIDs: StaleMediaID[] }) {
     </CollapsibleDiagnosticsSection>
   );
 }
-
-function LibraryPosterSection({ library }: { library: Library }) {
-  const uploadMutation = useUploadLibraryPoster();
-  const deleteMutation = useDeleteLibraryPoster();
-  const fileInputId = `poster-upload-${library.id}`;
-
-  function handleFileChange(e: React.ChangeEvent<HTMLInputElement>) {
-    const file = e.target.files?.[0];
-    if (!file) return;
-    uploadMutation.mutate({ id: library.id, file });
-    e.target.value = "";
-  }
-
-  return (
-    <div className="space-y-1.5">
-      <Label>Poster</Label>
-      <div className="flex items-center gap-2">
-        {library.poster_url ? (
-          <img
-            src={library.poster_url}
-            alt={`${library.name} poster`}
-            className="border-border h-14 flex-shrink-0 rounded border object-cover"
-            style={{ aspectRatio: "16/9" }}
-          />
-        ) : (
-          <div
-            className="border-border bg-muted/30 flex h-14 flex-shrink-0 items-center justify-center rounded border border-dashed"
-            style={{ aspectRatio: "16/9" }}
-          >
-            <ImageIcon className="text-muted-foreground/40 h-4 w-4" />
-          </div>
-        )}
-        <input
-          id={fileInputId}
-          type="file"
-          accept="image/jpeg,image/png,image/webp"
-          className="hidden"
-          onChange={handleFileChange}
-        />
-        <Button
-          type="button"
-          variant="outline"
-          size="sm"
-          className="h-8 text-xs"
-          onClick={() => document.getElementById(fileInputId)?.click()}
-          disabled={uploadMutation.isPending}
-        >
-          {uploadMutation.isPending ? "..." : library.poster_url ? "Replace" : "Upload"}
-        </Button>
-        {library.poster_url && (
-          <Button
-            type="button"
-            variant="ghost"
-            size="icon"
-            className="text-muted-foreground hover:text-destructive h-8 w-8"
-            onClick={() => deleteMutation.mutate(library.id)}
-            disabled={deleteMutation.isPending}
-            title="Remove poster"
-          >
-            <Trash2 className="h-3 w-3" />
-          </Button>
-        )}
-      </div>
-    </div>
-  );
-}