diff --git a/apps/web/src/components/admin-allow-list-channel-list.tsx b/apps/web/src/components/admin-allow-list-channel-list.tsx
index f58e0ee..627385d 100644
--- a/apps/web/src/components/admin-allow-list-channel-list.tsx
+++ b/apps/web/src/components/admin-allow-list-channel-list.tsx
@@ -35,7 +35,7 @@ export function AdminAllowListChannelList({
   onRemove,
 }: Props) {
   return (
-    <section className="border-t border-border pt-4">
+    <section className="min-w-0 border-t border-border pt-4">
       <div className="mb-3 flex items-center justify-between gap-3">
         <div>
           <h2 className="text-sm font-semibold text-fg">{title}</h2>
@@ -57,7 +57,7 @@ export function AdminAllowListChannelList({
             return (
               <div
                 key={item.url}
-                className="group relative flex items-center gap-3 border-b border-border px-0 py-3 last:border-b-0"
+                className="group relative flex min-w-0 items-center gap-3 border-b border-border px-0 py-3 last:border-b-0"
               >
                 <ChannelAvatar
                   src={item.thumbnailUrl ?? ""}
diff --git a/apps/web/src/components/admin-allow-list-form.tsx b/apps/web/src/components/admin-allow-list-form.tsx
index 64c87b5..3937ce2 100644
--- a/apps/web/src/components/admin-allow-list-form.tsx
+++ b/apps/web/src/components/admin-allow-list-form.tsx
@@ -34,7 +34,7 @@ export function AdminAllowListForm({ title, description, trustedUrls, pending, o
   const channels = search.data?.channels ?? [];
 
   return (
-    <section className="border-t border-border pt-4">
+    <section className="min-w-0 border-t border-border pt-4">
       <div className="mb-3 flex flex-col gap-1">
         <h2 className="text-sm font-semibold text-fg">{title}</h2>
         <p className="text-xs text-fg-soft">{description}</p>
@@ -61,7 +61,7 @@ export function AdminAllowListForm({ title, description, trustedUrls, pending, o
             {channels.slice(0, 8).map((channel) => {
               const alreadyAdded = isTrusted(channel, trusted);
               return (
-                <div key={channel.url} className="flex items-center gap-3 px-3 py-2.5">
+                <div key={channel.url} className="flex min-w-0 items-center gap-3 px-3 py-2.5">
                   <ChannelAvatar
                     src={proxyImage(channel.thumbnailUrl)}
                     name={channel.name}
diff --git a/apps/web/src/components/admin-allow-list-playlist-list.tsx b/apps/web/src/components/admin-allow-list-playlist-list.tsx
index 6597c57..8f0abd4 100644
--- a/apps/web/src/components/admin-allow-list-playlist-list.tsx
+++ b/apps/web/src/components/admin-allow-list-playlist-list.tsx
@@ -35,7 +35,7 @@ function XIcon() {
 
 export function AdminAllowListPlaylistList({ title, playlists, onRemove }: Props) {
   return (
-    <section className="border-t border-border pt-4">
+    <section className="min-w-0 border-t border-border pt-4">
       <div className="mb-3 flex items-center justify-between gap-3">
         <h2 className="text-sm font-semibold text-fg">{title}</h2>
         <span className="text-xs text-fg-soft">
@@ -51,7 +51,7 @@ export function AdminAllowListPlaylistList({ title, playlists, onRemove }: Props
             return (
               <div
                 key={playlist.url}
-                className="flex items-center gap-3 border-b border-border px-0 py-3 last:border-b-0"
+                className="flex min-w-0 items-center gap-3 border-b border-border px-0 py-3 last:border-b-0"
               >
                 <img
                   src={proxyImage(playlist.thumbnailUrl ?? "")}
diff --git a/apps/web/src/components/admin-allow-list-playlist-search.tsx b/apps/web/src/components/admin-allow-list-playlist-search.tsx
index 071862d..cc76f26 100644
--- a/apps/web/src/components/admin-allow-list-playlist-search.tsx
+++ b/apps/web/src/components/admin-allow-list-playlist-search.tsx
@@ -69,7 +69,7 @@ export function AdminAllowListPlaylistSearch({
   }
 
   return (
-    <section className="border-t border-border pt-4">
+    <section className="min-w-0 border-t border-border pt-4">
       <div className="mb-3 flex flex-col gap-1">
         <h2 className="text-sm font-semibold text-fg">{title}</h2>
         <p className="text-xs text-fg-soft">{description}</p>
@@ -108,7 +108,7 @@ export function AdminAllowListPlaylistSearch({
             {playlists.slice(0, 8).map((playlist) => {
               const alreadyAdded = added.has(playlist.url);
               return (
-                <div key={playlist.url} className="flex items-center gap-3 px-3 py-2.5">
+                <div key={playlist.url} className="flex min-w-0 items-center gap-3 px-3 py-2.5">
                   <img
                     src={proxyImage(playlist.thumbnailUrl)}
                     alt=""
diff --git a/apps/web/src/components/admin-allow-list-section.tsx b/apps/web/src/components/admin-allow-list-section.tsx
index e33f26e..ed05682 100644
--- a/apps/web/src/components/admin-allow-list-section.tsx
+++ b/apps/web/src/components/admin-allow-list-section.tsx
@@ -57,16 +57,16 @@ export function AdminAllowListSection({ enabled, onToast }: Props) {
   }
 
   return (
-    <div className="flex flex-col gap-5">
+    <div className="flex min-w-0 flex-col gap-5">
       <section className="border-t border-border pt-4">
-        <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-          <div className="flex flex-col gap-1">
+        <div className="flex min-w-0 flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+          <div className="min-w-0 flex flex-col gap-1">
             <h2 className="text-sm font-semibold text-fg">Entire instance</h2>
             <p className="text-xs text-fg-soft">
               Restrict everyone to the admin allow list, including guests.
             </p>
           </div>
-          <div className="flex gap-2">
+          <div className="flex flex-wrap gap-2">
             <button
               type="button"
               disabled={adminSettings.update.isPending}
@@ -86,7 +86,11 @@ export function AdminAllowListSection({ enabled, onToast }: Props) {
           </div>
         </div>
       </section>
-      <AdminAllowListUsers enabled={enabled} onToast={onToast} />
+      <AdminAllowListUsers
+        enabled={enabled}
+        instanceRestricted={instanceRestricted}
+        onToast={onToast}
+      />
       <AdminAllowListForm
         title="Add global channel"
         description="Search by channel name or handle. Added channels apply to every restricted user."
diff --git a/apps/web/src/components/admin-allow-list-user-detail.tsx b/apps/web/src/components/admin-allow-list-user-detail.tsx
index f8935e5..65928e2 100644
--- a/apps/web/src/components/admin-allow-list-user-detail.tsx
+++ b/apps/web/src/components/admin-allow-list-user-detail.tsx
@@ -11,23 +11,68 @@ import { AdminUserAvatar } from "./admin-user-avatar";
 
 type Props = {
   user: AdminAllowListUser;
+  instanceRestricted: boolean;
   onToast: (message: string) => void;
 };
 
-export function AdminAllowListUserDetail({ user, onToast }: Props) {
+function accessState(user: AdminAllowListUser, instanceRestricted: boolean) {
+  if (user.accessMode === "allow_list") {
+    return {
+      label: "User-specific allow-list",
+      action: instanceRestricted ? "Set unrestricted override" : "Unrestrict user",
+      nextMode: "unrestricted" as const,
+      toast: instanceRestricted ? "Unrestricted override set" : "User unrestricted",
+      active: true,
+    };
+  }
+  if (instanceRestricted && user.adminManagedAccessMode) {
+    return {
+      label: "Admin unrestricted override",
+      action: "Restrict user",
+      nextMode: "allow_list" as const,
+      toast: "User restricted",
+      active: true,
+    };
+  }
+  if (instanceRestricted) {
+    return {
+      label: "Restricted by entire instance",
+      action: "Set unrestricted override",
+      nextMode: "unrestricted" as const,
+      toast: "Unrestricted override set",
+      active: false,
+    };
+  }
+  return {
+    label: "Unrestricted",
+    action: "Restrict user",
+    nextMode: "allow_list" as const,
+    toast: "User restricted",
+    active: false,
+  };
+}
+
+export function AdminAllowListUserDetail({ user, instanceRestricted, onToast }: Props) {
   const detail = useAdminUserAllowList(user.id);
   const mutations = useAdminAllowListMutations(user.id);
   const data = detail.data;
-  const selected = data?.user ?? user;
-  const restricted = selected.accessMode === "allow_list";
+  const selected = data?.user
+    ? {
+        ...user,
+        ...data.user,
+        adminManagedAccessMode: data.user.adminManagedAccessMode ?? user.adminManagedAccessMode,
+        avatarUrl: data.user.avatarUrl ?? user.avatarUrl,
+        avatarType: data.user.avatarType ?? user.avatarType,
+        avatarCode: data.user.avatarCode ?? user.avatarCode,
+      }
+    : user;
+  const state = accessState(selected, instanceRestricted);
 
   function toggleMode() {
-    const accessMode = restricted ? "unrestricted" : "allow_list";
     mutations.userMode.mutate(
-      { id: selected.id, accessMode },
+      { id: selected.id, accessMode: state.nextMode },
       {
-        onSuccess: () =>
-          onToast(accessMode === "allow_list" ? "User restricted" : "User unrestricted"),
+        onSuccess: () => onToast(state.toast),
         onError: (error) =>
           onToast(error instanceof Error ? error.message : "Unable to update user"),
       },
@@ -43,9 +88,9 @@ export function AdminAllowListUserDetail({ user, onToast }: Props) {
   }
 
   return (
-    <div className="flex flex-col gap-5">
+    <div className="flex min-w-0 flex-col gap-5">
       <section className="border-t border-border pt-4">
-        <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+        <div className="flex min-w-0 flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
           <div className="flex min-w-0 items-center gap-3">
             <AdminUserAvatar
               user={{
@@ -53,9 +98,9 @@ export function AdminAllowListUserDetail({ user, onToast }: Props) {
                 role: "user",
                 publicUsername: null,
                 bio: null,
-                avatarUrl: null,
-                avatarType: null,
-                avatarCode: null,
+                avatarUrl: selected.avatarUrl ?? null,
+                avatarType: selected.avatarType ?? null,
+                avatarCode: selected.avatarCode ?? null,
                 suspended: false,
                 verified: false,
                 createdAt: 0,
@@ -67,6 +112,7 @@ export function AdminAllowListUserDetail({ user, onToast }: Props) {
                 {selected.name || selected.email}
               </p>
               <p className="truncate text-xs text-fg-soft">{selected.email}</p>
+              <p className="truncate text-xs text-fg-muted">{state.label}</p>
             </div>
           </div>
           <button
@@ -74,10 +120,10 @@ export function AdminAllowListUserDetail({ user, onToast }: Props) {
             disabled={mutations.userMode.isPending}
             onClick={toggleMode}
             className={`h-8 border px-3 text-xs transition-colors disabled:cursor-not-allowed disabled:opacity-60 ${
-              restricted ? "border-fg bg-fg text-app" : "border-border text-fg-soft hover:text-fg"
+              state.active ? "border-fg bg-fg text-app" : "border-border text-fg-soft hover:text-fg"
             }`}
           >
-            {restricted ? "Allow-list" : "Unrestricted"}
+            {state.action}
           </button>
         </div>
       </section>
diff --git a/apps/web/src/components/admin-allow-list-users.tsx b/apps/web/src/components/admin-allow-list-users.tsx
index 14606e8..c57d52b 100644
--- a/apps/web/src/components/admin-allow-list-users.tsx
+++ b/apps/web/src/components/admin-allow-list-users.tsx
@@ -1,30 +1,53 @@
-import { useEffect, useState } from "react";
-import { useAdminUserSearch } from "../hooks/use-admin-granular-allow-list";
+import { useState } from "react";
+import { useAdminAllowListUsers, useAdminUserSearch } from "../hooks/use-admin-granular-allow-list";
 import type { AdminAllowListUser } from "../types/allow-list";
 import { AdminAllowListUserDetail } from "./admin-allow-list-user-detail";
+import { AdminUserAvatar } from "./admin-user-avatar";
 
 type Props = {
   enabled: boolean;
+  instanceRestricted: boolean;
   onToast: (message: string) => void;
 };
 
-export function AdminAllowListUsers({ enabled, onToast }: Props) {
+function avatarUser(user: AdminAllowListUser) {
+  return {
+    ...user,
+    role: "user" as const,
+    publicUsername: null,
+    bio: null,
+    avatarUrl: user.avatarUrl ?? null,
+    avatarType: user.avatarType ?? null,
+    avatarCode: user.avatarCode ?? null,
+    suspended: false,
+    verified: false,
+    createdAt: 0,
+  };
+}
+
+function accessLabel(user: AdminAllowListUser, instanceRestricted: boolean): string {
+  if (user.accessMode === "allow_list") return "User restricted";
+  if (!instanceRestricted) return "Unrestricted";
+  return user.adminManagedAccessMode ? "Admin override" : "Instance restricted";
+}
+
+export function AdminAllowListUsers({ enabled, instanceRestricted, onToast }: Props) {
   const [search, setSearch] = useState("");
   const [selected, setSelected] = useState<AdminAllowListUser | null>(null);
-  const query = useAdminUserSearch(search, enabled);
-  const users = query.data ?? [];
-
-  useEffect(() => {
-    if (!selected) return;
-    if (users.some((user) => user.id === selected.id)) return;
-    setSelected(null);
-  }, [selected, users]);
+  const searching = search.trim().length >= 2;
+  const managedQuery = useAdminAllowListUsers(enabled && !searching);
+  const searchQuery = useAdminUserSearch(search, enabled && searching);
+  const managedUsers = managedQuery.data?.pages.flatMap((page) => page.items) ?? [];
+  const visibleUsers = searching ? (searchQuery.data ?? []) : managedUsers;
+  const loading = searching ? searchQuery.isLoading : managedQuery.isLoading;
 
   return (
-    <section className="border-t border-border pt-4">
+    <section className="min-w-0 border-t border-border pt-4">
       <div className="mb-3 flex flex-col gap-1">
         <h2 className="text-sm font-semibold text-fg">Specific users</h2>
-        <p className="text-xs text-fg-soft">Search a user, then configure only that account.</p>
+        <p className="text-xs text-fg-soft">
+          Users with admin-managed access appear here. Search to configure another account.
+        </p>
       </div>
       <input
         value={search}
@@ -33,38 +56,55 @@ export function AdminAllowListUsers({ enabled, onToast }: Props) {
         className="h-10 w-full border border-border bg-app px-3 text-sm text-fg outline-none transition-colors placeholder:text-fg-muted focus:border-border-strong"
       />
       <div className="mt-3 border-y border-border">
-        {search.trim().length < 2 ? (
-          <div className="px-3 py-4 text-sm text-fg-soft">Type at least two characters.</div>
-        ) : query.isLoading ? (
+        {loading ? (
           <div className="px-3 py-4 text-sm text-fg-soft">Searching users...</div>
-        ) : users.length === 0 ? (
-          <div className="px-3 py-4 text-sm text-fg-soft">No users found.</div>
+        ) : visibleUsers.length === 0 ? (
+          <div className="px-3 py-4 text-sm text-fg-soft">
+            {searching ? "No users found." : "No users are managed by allow-list rules yet."}
+          </div>
         ) : (
           <div className="divide-y divide-border">
-            {users.map((user) => (
+            {visibleUsers.map((user) => (
               <button
                 key={user.id}
                 type="button"
                 onClick={() => setSelected(user)}
-                className={`flex w-full items-center gap-3 border-l-2 py-2.5 pl-2 pr-0 text-left transition-colors hover:border-border-strong ${
+                className={`flex w-full min-w-0 items-center gap-3 border-l-2 py-2.5 pl-2 pr-0 text-left transition-colors hover:border-border-strong ${
                   selected?.id === user.id ? "border-fg" : "border-transparent"
                 }`}
               >
+                <AdminUserAvatar user={avatarUser(user)} className="h-9 w-9 shrink-0" />
                 <div className="min-w-0 flex-1">
                   <p className="truncate text-sm text-fg">{user.name || user.email}</p>
                   <p className="truncate text-xs text-fg-soft">{user.email}</p>
                 </div>
-                <span className="text-xs text-fg-soft">
-                  {user.accessMode === "allow_list" ? "Allow-list" : "Unrestricted"}
+                <span className="shrink-0 text-xs text-fg-soft">
+                  {accessLabel(user, instanceRestricted)}
                 </span>
               </button>
             ))}
           </div>
         )}
       </div>
+      {!searching && managedQuery.hasNextPage && (
+        <button
+          type="button"
+          disabled={managedQuery.isFetchingNextPage}
+          onClick={() => {
+            void managedQuery.fetchNextPage();
+          }}
+          className="mt-3 h-8 border border-border px-3 text-xs text-fg-soft transition-colors hover:border-border-strong hover:text-fg disabled:cursor-not-allowed disabled:opacity-60"
+        >
+          {managedQuery.isFetchingNextPage ? "Loading..." : "Load more users"}
+        </button>
+      )}
       {selected && (
         <div className="mt-6">
-          <AdminAllowListUserDetail user={selected} onToast={onToast} />
+          <AdminAllowListUserDetail
+            user={selected}
+            instanceRestricted={instanceRestricted}
+            onToast={onToast}
+          />
         </div>
       )}
     </section>
diff --git a/apps/web/src/components/admin-console-nav.tsx b/apps/web/src/components/admin-console-nav.tsx
index f0a6e6d..1c98beb 100644
--- a/apps/web/src/components/admin-console-nav.tsx
+++ b/apps/web/src/components/admin-console-nav.tsx
@@ -13,7 +13,7 @@ type Props = {
 
 export function AdminConsoleNav({ items, active, onSelect }: Props) {
   return (
-    <nav className="overflow-x-auto pt-3" aria-label="Admin sections">
+    <nav className="min-w-0 overflow-x-auto pt-3" aria-label="Admin sections">
       <div className="flex min-w-max gap-3 sm:grid sm:min-w-0 sm:grid-cols-5 sm:gap-1">
         {items.map((item) => {
           const isActive = item.key === active;
diff --git a/apps/web/src/components/collection-page-header.tsx b/apps/web/src/components/collection-page-header.tsx
new file mode 100644
index 0000000..65df886
--- /dev/null
+++ b/apps/web/src/components/collection-page-header.tsx
@@ -0,0 +1,31 @@
+import { PlaylistActions } from "./playlist-actions";
+
+type Props = {
+  title: string;
+  count: number;
+  loading: boolean;
+  canPlay: boolean;
+  onPlayAll: () => void;
+  onShuffle: () => void;
+};
+
+export function CollectionPageHeader({
+  title,
+  count,
+  loading,
+  canPlay,
+  onPlayAll,
+  onShuffle,
+}: Props) {
+  return (
+    <header className="flex flex-wrap items-end justify-between gap-3">
+      <div>
+        <h1 className="text-lg font-semibold text-fg">{title}</h1>
+        <p className="text-xs text-fg-soft">
+          {loading ? "Loading videos" : `${count} video${count !== 1 ? "s" : ""}`}
+        </p>
+      </div>
+      {canPlay && <PlaylistActions onPlayAll={onPlayAll} onShuffle={onShuffle} />}
+    </header>
+  );
+}
diff --git a/apps/web/src/components/continue-card.tsx b/apps/web/src/components/continue-card.tsx
index 0a27c97..2475525 100644
--- a/apps/web/src/components/continue-card.tsx
+++ b/apps/web/src/components/continue-card.tsx
@@ -1,8 +1,6 @@
 import { Link } from "@tanstack/react-router";
-import { useEffect, useState } from "react";
 import { useWatchPrefetch } from "../hooks/use-watch-prefetch";
 import { formatDuration } from "../lib/format";
-import { resolveHistoryChannelMeta } from "../lib/history-enrichment";
 import { proxyImage } from "../lib/proxy";
 import { watchRouteSearch } from "../lib/watch-url";
 import type { VideoStream } from "../types/stream";
@@ -19,7 +17,7 @@ type ContinueCardProps = {
 
 export function ContinueCard({ item }: ContinueCardProps) {
   const prefetch = useWatchPrefetch(item.url);
-  const [uploaderVerified, setUploaderVerified] = useState(item.uploaderVerified ?? false);
+  const uploaderVerified = item.uploaderVerified ?? false;
   const thumbnail = proxyImage(item.thumbnail);
   const menuStream: VideoStream = {
     id: item.url,
@@ -35,22 +33,6 @@ export function ContinueCard({ item }: ContinueCardProps) {
     duration: item.duration,
   };
 
-  useEffect(() => {
-    let active = true;
-    setUploaderVerified(item.uploaderVerified ?? false);
-    if (item.uploaderVerified !== undefined) {
-      return () => {
-        active = false;
-      };
-    }
-    resolveHistoryChannelMeta(item).then((meta) => {
-      if (active) setUploaderVerified(meta.uploaderVerified);
-    });
-    return () => {
-      active = false;
-    };
-  }, [item]);
-
   return (
     <div className="w-44 flex-shrink-0">
       <Link
diff --git a/apps/web/src/components/download-sheet.tsx b/apps/web/src/components/download-sheet.tsx
index 098a3dd..5d5e59a 100644
--- a/apps/web/src/components/download-sheet.tsx
+++ b/apps/web/src/components/download-sheet.tsx
@@ -134,7 +134,7 @@ export function DownloadSheet({ stream, onClose, onDone }: Props) {
           {requiresManualArtifactTap && (
             <div className="mt-2 flex flex-col gap-3 rounded-lg border border-border bg-surface/60 p-3">
               <p className="text-xs text-fg-muted">
-                File is ready. Tap below to open the iOS share sheet and save to Files.
+                File is ready. Tap below to open it in iOS and save to Files.
               </p>
               <button
                 type="button"
@@ -142,7 +142,7 @@ export function DownloadSheet({ stream, onClose, onDone }: Props) {
                 disabled={completion.isCompleting}
                 className="w-full rounded-lg bg-fg px-3 py-2 text-sm font-medium text-app transition-colors hover:bg-fg-strong disabled:cursor-not-allowed disabled:bg-surface-soft disabled:text-fg-muted"
               >
-                {completion.isCompleting ? "Opening..." : "Open iOS share sheet"}
+                {completion.isCompleting ? "Opening..." : "Open file"}
               </button>
             </div>
           )}
diff --git a/apps/web/src/components/format-selector.tsx b/apps/web/src/components/format-selector.tsx
index 5b23920..e691103 100644
--- a/apps/web/src/components/format-selector.tsx
+++ b/apps/web/src/components/format-selector.tsx
@@ -14,6 +14,7 @@ import {
 const FORMAT_ORDER: CodecFamily[] = ["H.264", "VP9", "AV1"];
 const MENU_ITEMS_CLASS =
   "vds-menu-items overflow-y-auto overscroll-y-contain pr-0.5 [scrollbar-width:thin] [scrollbar-color:var(--color-zinc-500)_transparent] [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-surface-soft/80 [&::-webkit-scrollbar-thumb:hover]:bg-surface-soft [&::-webkit-scrollbar-track]:bg-transparent";
+const QUALITY_OPTIONS = { sort: "descending" } as const;
 
 function isCodecFamily(value: string): value is CodecFamily {
   return value === "H.264" || value === "VP9" || value === "AV1";
@@ -27,7 +28,7 @@ function formatLabel(family: CodecFamily, track: dashjs.MediaInfo): string {
 export function FormatSelector() {
   const menuRef = useRef<MenuInstance>(null);
   const { player, selectedVideoTrack } = useDashPlayerSnapshot();
-  const options = useVideoQualityOptions({ sort: "descending" });
+  const options = useVideoQualityOptions(QUALITY_OPTIONS);
 
   const videoOptions = options.filter((o) => o.quality !== null);
   const dashGroups = player ? dashTrackGroups(player) : null;
diff --git a/apps/web/src/components/history-card.tsx b/apps/web/src/components/history-card.tsx
index f4b597f..4eef8ac 100644
--- a/apps/web/src/components/history-card.tsx
+++ b/apps/web/src/components/history-card.tsx
@@ -83,10 +83,11 @@ export function HistoryCard({ item, onRemove, index }: HistoryCardProps) {
             type="button"
             onClick={(e) => {
               e.preventDefault();
+              e.stopPropagation();
               onRemove();
             }}
             aria-label="Remove from history"
-            className="absolute top-1.5 right-1.5 bg-black/70 hover:bg-black/90 text-white rounded-full p-1 opacity-0 group-hover:opacity-100 transition-opacity"
+            className="absolute top-1.5 right-1.5 rounded-full bg-black/70 p-1.5 text-white opacity-100 transition-opacity hover:bg-black/90 sm:p-1 sm:opacity-0 sm:group-hover:opacity-100 sm:focus-visible:opacity-100"
           >
             <XIcon />
           </button>
diff --git a/apps/web/src/components/history-channel-avatar.tsx b/apps/web/src/components/history-channel-avatar.tsx
index 22aa9df..4ac35da 100644
--- a/apps/web/src/components/history-channel-avatar.tsx
+++ b/apps/web/src/components/history-channel-avatar.tsx
@@ -1,5 +1,3 @@
-import { useEffect, useState } from "react";
-import { resolveHistoryAvatar } from "../lib/history-enrichment";
 import { proxyImage } from "../lib/proxy";
 import type { HistoryItem } from "../types/user";
 import { ChannelAvatar } from "./channel-avatar";
@@ -10,23 +8,11 @@ type HistoryChannelAvatarProps = {
 };
 
 export function HistoryChannelAvatar({ item, className }: HistoryChannelAvatarProps) {
-  const [src, setSrc] = useState(item.channelAvatar ?? "");
-
-  useEffect(() => {
-    let active = true;
-    setSrc(item.channelAvatar ?? "");
-    if (item.channelAvatar)
-      return () => {
-        active = false;
-      };
-    resolveHistoryAvatar(item).then((avatarUrl) => {
-      if (!active || !avatarUrl) return;
-      setSrc(avatarUrl);
-    });
-    return () => {
-      active = false;
-    };
-  }, [item]);
-
-  return <ChannelAvatar src={proxyImage(src)} name={item.channelName} className={className} />;
+  return (
+    <ChannelAvatar
+      src={proxyImage(item.channelAvatar ?? "")}
+      name={item.channelName}
+      className={className}
+    />
+  );
 }
diff --git a/apps/web/src/components/history-filter.tsx b/apps/web/src/components/history-filter.tsx
index 3ee9d9f..4664dfb 100644
--- a/apps/web/src/components/history-filter.tsx
+++ b/apps/web/src/components/history-filter.tsx
@@ -11,6 +11,8 @@ type Props = {
   filter: FilterState | null;
   onFilterChange: (value: FilterState | null) => void;
   resultCount: number;
+  canClearHistory: boolean;
+  onClearHistory: () => void;
 };
 
 const PRESET_OPTIONS = [
@@ -50,6 +52,8 @@ export function HistoryFilter({
   filter,
   onFilterChange,
   resultCount,
+  canClearHistory,
+  onClearHistory,
 }: Props) {
   const [calendarOpen, setCalendarOpen] = useState(false);
 
@@ -87,11 +91,22 @@ export function HistoryFilter({
   };
 
   return (
-    <aside className="w-full lg:w-52 flex-shrink-0 flex flex-col gap-4 lg:gap-5 lg:sticky lg:top-20 lg:self-start">
+    <aside className="order-first flex w-full flex-shrink-0 flex-col gap-4 lg:order-none lg:sticky lg:top-20 lg:w-52 lg:self-start lg:gap-5">
       <div>
-        <p className="text-[11px] text-fg-soft uppercase tracking-wider mb-2.5">
-          {resultCount} {resultCount === 1 ? "video" : "videos"}
-        </p>
+        <div className="mb-2.5 flex items-center justify-between gap-3">
+          <p className="text-[11px] text-fg-soft uppercase tracking-wider">
+            {resultCount} {resultCount === 1 ? "video" : "videos"}
+          </p>
+          {canClearHistory && (
+            <button
+              type="button"
+              onClick={onClearHistory}
+              className="text-[11px] text-danger transition-colors hover:text-danger-strong"
+            >
+              Clear all
+            </button>
+          )}
+        </div>
         <div className="relative">
           <span className="absolute left-2.5 top-1/2 -translate-y-1/2 text-fg-soft pointer-events-none">
             <SearchIcon />
diff --git a/apps/web/src/components/media-session-position-sync.tsx b/apps/web/src/components/media-session-position-sync.tsx
new file mode 100644
index 0000000..0b96763
--- /dev/null
+++ b/apps/web/src/components/media-session-position-sync.tsx
@@ -0,0 +1,66 @@
+import { useEffect } from "react";
+import { useMediaPlayer } from "../lib/vidstack";
+
+type Props = {
+  currentTimeRef: { current: number };
+  durationRef: { current: number };
+};
+
+export function MediaSessionPositionSync({ currentTimeRef, durationRef }: Props) {
+  const player = useMediaPlayer();
+
+  useEffect(() => {
+    const rootElement = player?.el;
+    if (rootElement == null) return;
+    const mediaRoot = rootElement;
+    let cleanup: (() => void) | null = null;
+
+    function syncPosition(media: HTMLMediaElement) {
+      const duration = Number.isFinite(media.duration) ? media.duration : 0;
+      const currentTime = Number.isFinite(media.currentTime) ? media.currentTime : 0;
+      const playbackRate =
+        Number.isFinite(media.playbackRate) && media.playbackRate > 0 ? media.playbackRate : 1;
+      currentTimeRef.current = currentTime;
+      durationRef.current = duration;
+      if (typeof navigator === "undefined" || !("mediaSession" in navigator)) return;
+      const setPositionState = navigator.mediaSession.setPositionState?.bind(
+        navigator.mediaSession,
+      );
+      if (!setPositionState || duration <= 0 || currentTime < 0) return;
+      try {
+        setPositionState({ duration, playbackRate, position: Math.min(duration, currentTime) });
+      } catch {}
+    }
+
+    function attach() {
+      if (cleanup) return true;
+      const media = mediaRoot.querySelector<HTMLMediaElement>("video,audio");
+      if (!media) return false;
+      const sync = () => syncPosition(media);
+      media.addEventListener("timeupdate", sync);
+      media.addEventListener("durationchange", sync);
+      media.addEventListener("ratechange", sync);
+      media.addEventListener("loadedmetadata", sync);
+      sync();
+      cleanup = () => {
+        media.removeEventListener("timeupdate", sync);
+        media.removeEventListener("durationchange", sync);
+        media.removeEventListener("ratechange", sync);
+        media.removeEventListener("loadedmetadata", sync);
+      };
+      return true;
+    }
+
+    if (attach()) return () => cleanup?.();
+    const observer = new MutationObserver(() => {
+      if (attach()) observer.disconnect();
+    });
+    observer.observe(mediaRoot, { childList: true, subtree: true });
+    return () => {
+      observer.disconnect();
+      cleanup?.();
+    };
+  }, [currentTimeRef, durationRef, player]);
+
+  return null;
+}
diff --git a/apps/web/src/components/media-session-sync.tsx b/apps/web/src/components/media-session-sync.tsx
index bfe13cf..009ad9c 100644
--- a/apps/web/src/components/media-session-sync.tsx
+++ b/apps/web/src/components/media-session-sync.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useRef } from "react";
 import { useMediaRemote, useMediaState } from "../lib/vidstack";
+import { MediaSessionPositionSync } from "./media-session-position-sync";
 
 type Props = {
   title?: string;
@@ -7,6 +8,8 @@ type Props = {
   artwork?: string;
   canSeek?: boolean;
   isLive?: boolean;
+  onPreviousTrack?: () => void;
+  onNextTrack?: () => void;
 };
 
 function safeSetActionHandler(
@@ -25,18 +28,15 @@ export function MediaSessionSync({
   artwork,
   canSeek = true,
   isLive = false,
+  onPreviousTrack,
+  onNextTrack,
 }: Props) {
   const remote = useMediaRemote();
   const paused = useMediaState("paused");
-  const currentTime = useMediaState("currentTime");
-  const duration = useMediaState("duration");
-  const playbackRate = useMediaState("playbackRate");
   const currentTimeRef = useRef(0);
   const durationRef = useRef(0);
   const pausedRef = useRef(true);
 
-  currentTimeRef.current = Number.isFinite(currentTime) ? currentTime : 0;
-  durationRef.current = Number.isFinite(duration) ? duration : 0;
   pausedRef.current = paused;
 
   useEffect(() => {
@@ -85,10 +85,8 @@ export function MediaSessionSync({
     safeSetActionHandler(session, "stop", () => {
       void Promise.resolve(remote.pause()).catch(() => {});
     });
-    if (isLive) {
-      safeSetActionHandler(session, "previoustrack", null);
-      safeSetActionHandler(session, "nexttrack", null);
-    }
+    safeSetActionHandler(session, "previoustrack", isLive ? null : (onPreviousTrack ?? null));
+    safeSetActionHandler(session, "nexttrack", isLive ? null : (onNextTrack ?? null));
     return () => {
       safeSetActionHandler(session, "play", null);
       safeSetActionHandler(session, "pause", null);
@@ -99,7 +97,7 @@ export function MediaSessionSync({
       safeSetActionHandler(session, "previoustrack", null);
       safeSetActionHandler(session, "nexttrack", null);
     };
-  }, [canSeek, isLive, remote]);
+  }, [canSeek, isLive, onPreviousTrack, onNextTrack, remote]);
 
   useEffect(() => {
     if (typeof navigator === "undefined" || !("mediaSession" in navigator)) return;
@@ -129,22 +127,5 @@ export function MediaSessionSync({
     navigator.mediaSession.playbackState = paused ? "paused" : "playing";
   }, [paused]);
 
-  useEffect(() => {
-    if (typeof navigator === "undefined" || !("mediaSession" in navigator)) return;
-    const session = navigator.mediaSession;
-    const setPositionState = session.setPositionState?.bind(session);
-    if (!setPositionState) return;
-    if (!Number.isFinite(duration) || duration <= 0) return;
-    if (!Number.isFinite(currentTime) || currentTime < 0) return;
-    const safePlaybackRate = Number.isFinite(playbackRate) && playbackRate > 0 ? playbackRate : 1;
-    try {
-      setPositionState({
-        duration,
-        playbackRate: safePlaybackRate,
-        position: Math.min(duration, currentTime),
-      });
-    } catch {}
-  }, [duration, currentTime, playbackRate]);
-
-  return null;
+  return <MediaSessionPositionSync currentTimeRef={currentTimeRef} durationRef={durationRef} />;
 }
diff --git a/apps/web/src/components/navbar-search.tsx b/apps/web/src/components/navbar-search.tsx
index aa90d6c..75363b3 100644
--- a/apps/web/src/components/navbar-search.tsx
+++ b/apps/web/src/components/navbar-search.tsx
@@ -6,6 +6,7 @@ import { useSearchHistory } from "../hooks/use-search-history";
 import { useSearchOverlayNavigation } from "../hooks/use-search-overlay-navigation";
 import { fetchSuggestions } from "../lib/api-suggestions";
 import { buildSearchOverlayItems } from "../lib/search-overlay-items";
+import { ConfirmModal } from "./confirm-modal";
 import { SearchOverlayList } from "./search-overlay-list";
 
 export function NavbarSearch() {
@@ -16,12 +17,13 @@ export function NavbarSearch() {
   const [suggestions, setSuggestions] = useState<string[]>([]);
   const [selectedIndex, setSelectedIndex] = useState(-1);
   const [open, setOpen] = useState(false);
+  const [confirmClearOpen, setConfirmClearOpen] = useState(false);
   const rootRef = useRef<HTMLDivElement>(null);
   const listRef = useRef<HTMLUListElement>(null);
   const { service, navigateAndClose } = useSearchOverlayNavigation({
     onClose: () => setOpen(false),
   });
-  const { visibleItems, canLoadMore, loadMore } = useSearchHistory();
+  const { visibleItems, canLoadMore, loadMore, clear } = useSearchHistory();
   const debouncedQuery = useDebouncedValue(query, 300);
   const items = buildSearchOverlayItems(query, visibleItems, suggestions);
   const showHistory = query.trim().length === 0 && visibleItems.length > 0;
@@ -107,6 +109,11 @@ export function NavbarSearch() {
     if (target.scrollTop >= threshold) loadMore();
   }
 
+  function handleConfirmClear() {
+    clear.mutate();
+    setConfirmClearOpen(false);
+  }
+
   return (
     <search className="mx-4 flex min-w-0 flex-1 justify-center">
       <div ref={rootRef} className="relative w-full max-w-2xl min-w-0">
@@ -140,10 +147,20 @@ export function NavbarSearch() {
               selectedIndex={selectedIndex}
               listRef={listRef}
               onScroll={handleScroll}
+              onClearAll={() => setConfirmClearOpen(true)}
               onSelect={selectTerm}
             />
           </div>
         )}
+        {confirmClearOpen && (
+          <ConfirmModal
+            title="Clear search history?"
+            description="This removes all saved searches from your account."
+            confirmLabel="Clear all"
+            onConfirm={handleConfirmClear}
+            onCancel={() => setConfirmClearOpen(false)}
+          />
+        )}
       </div>
     </search>
   );
diff --git a/apps/web/src/components/player-defaults.tsx b/apps/web/src/components/player-defaults.tsx
index 8f55feb..f105723 100644
--- a/apps/web/src/components/player-defaults.tsx
+++ b/apps/web/src/components/player-defaults.tsx
@@ -2,6 +2,8 @@ import { useEffect, useRef } from "react";
 import { useAudioOptions, useMediaState, useVideoQualityOptions } from "../lib/vidstack";
 import { includesOriginal, normalizeLanguageTag } from "./player-language";
 
+const QUALITY_OPTIONS = { sort: "descending" } as const;
+
 type PlayerDefaultsProps = {
   defaultQuality?: string;
   defaultAudioLanguage?: string;
@@ -35,7 +37,7 @@ export function PlayerDefaults({
   defaultSubtitleLanguage,
 }: PlayerDefaultsProps) {
   const canPlay = useMediaState("canPlay");
-  const qualityOptions = useVideoQualityOptions({ sort: "descending" });
+  const qualityOptions = useVideoQualityOptions(QUALITY_OPTIONS);
   const audioOptions = useAudioOptions();
   const textTracks = useMediaState("textTracks");
   const qualityApplied = useRef(false);
diff --git a/apps/web/src/components/player-internals.tsx b/apps/web/src/components/player-internals.tsx
index 33fbdd8..428cca6 100644
--- a/apps/web/src/components/player-internals.tsx
+++ b/apps/web/src/components/player-internals.tsx
@@ -54,43 +54,76 @@ export function SponsorBlockSkipper({
 }) {
   const player = useMediaPlayer();
   const remote = useMediaRemote();
-  const currentTime = useMediaState("currentTime");
-  const duration = useMediaState("duration");
-  const muted = useMediaState("muted");
   const activeMuteRef = useRef<string | null>(null);
   const restoreMutedRef = useRef(false);
   useEffect(() => {
-    function setMuted(value: boolean) {
-      const media = player?.el?.ownerDocument.querySelector<HTMLMediaElement>("video,audio");
-      if (!media) return;
+    const root = player?.el;
+    if (!root) return;
+    const rootElement = root;
+    let cleanup: (() => void) | null = null;
+
+    function setMuted(media: HTMLMediaElement, value: boolean) {
       media.muted = value;
       media.dispatchEvent(new Event("volumechange", { bubbles: true }));
     }
 
-    let activeMute: string | null = null;
-    for (const seg of segments) {
-      if (seg.action !== "skip") continue;
-      const startTime = getSponsorBlockStartTime(seg, duration);
-      const endTime = getSponsorBlockEndTime(seg, duration);
-      if (currentTime >= startTime && currentTime < endTime) {
-        if (!muteInsteadOfSkip) {
-          remote.seek(endTime);
+    function process(media: HTMLMediaElement) {
+      const duration = Number.isFinite(media.duration) ? media.duration : 0;
+      const currentTime = Number.isFinite(media.currentTime) ? media.currentTime : 0;
+      let activeMute: string | null = null;
+      for (const seg of segments) {
+        if (seg.action !== "skip") continue;
+        const startTime = getSponsorBlockStartTime(seg, duration);
+        const endTime = getSponsorBlockEndTime(seg, duration);
+        if (currentTime >= startTime && currentTime < endTime) {
+          if (!muteInsteadOfSkip) {
+            remote.seek(endTime);
+            break;
+          }
+          activeMute = `${seg.category}:${seg.startTime}`;
+          if (activeMuteRef.current !== activeMute) {
+            activeMuteRef.current = activeMute;
+            restoreMutedRef.current = !media.muted;
+          }
+          setMuted(media, true);
           break;
         }
-        activeMute = `${seg.category}:${seg.startTime}`;
-        if (activeMuteRef.current !== activeMute) {
-          activeMuteRef.current = activeMute;
-          restoreMutedRef.current = !muted;
-        }
-        setMuted(true);
-        break;
+      }
+      if (muteInsteadOfSkip && !activeMute && activeMuteRef.current) {
+        if (restoreMutedRef.current) setMuted(media, false);
+        activeMuteRef.current = null;
+        restoreMutedRef.current = false;
       }
     }
-    if (muteInsteadOfSkip && !activeMute && activeMuteRef.current) {
-      if (restoreMutedRef.current) setMuted(false);
-      activeMuteRef.current = null;
-      restoreMutedRef.current = false;
+
+    function attach() {
+      if (cleanup) return true;
+      const media = rootElement.querySelector<HTMLMediaElement>("video,audio");
+      if (!media) return false;
+      const update = () => process(media);
+      media.addEventListener("timeupdate", update);
+      media.addEventListener("seeking", update);
+      media.addEventListener("durationchange", update);
+      media.addEventListener("loadedmetadata", update);
+      update();
+      cleanup = () => {
+        media.removeEventListener("timeupdate", update);
+        media.removeEventListener("seeking", update);
+        media.removeEventListener("durationchange", update);
+        media.removeEventListener("loadedmetadata", update);
+      };
+      return true;
     }
-  }, [currentTime, duration, muted, muteInsteadOfSkip, player, segments, remote]);
+
+    if (attach()) return () => cleanup?.();
+    const observer = new MutationObserver(() => {
+      if (attach()) observer.disconnect();
+    });
+    observer.observe(rootElement, { childList: true, subtree: true });
+    return () => {
+      observer.disconnect();
+      cleanup?.();
+    };
+  }, [muteInsteadOfSkip, player, segments, remote]);
   return null;
 }
diff --git a/apps/web/src/components/player-track-button.tsx b/apps/web/src/components/player-track-button.tsx
new file mode 100644
index 0000000..b98c45c
--- /dev/null
+++ b/apps/web/src/components/player-track-button.tsx
@@ -0,0 +1,27 @@
+type Props = {
+  direction: "previous" | "next";
+  onClick?: () => void;
+};
+
+export function PlayerTrackButton({ direction, onClick }: Props) {
+  if (!onClick) return null;
+  const label = direction === "previous" ? "Previous video" : "Next video";
+
+  return (
+    <button
+      type="button"
+      className="vds-button typetype-track-button"
+      aria-label={label}
+      title={label}
+      onClick={onClick}
+    >
+      <svg viewBox="0 0 32 32" className="vds-icon" fill="currentColor" aria-hidden="true">
+        {direction === "previous" ? (
+          <path d="M7 7h3v18H7V7Zm5 9 13 9V7l-13 9Z" />
+        ) : (
+          <path d="M22 7h3v18h-3V7ZM7 25l13-9L7 7v18Z" />
+        )}
+      </svg>
+    </button>
+  );
+}
diff --git a/apps/web/src/components/playlist-video-row.tsx b/apps/web/src/components/playlist-video-row.tsx
index df2f2a1..ea1783a 100644
--- a/apps/web/src/components/playlist-video-row.tsx
+++ b/apps/web/src/components/playlist-video-row.tsx
@@ -3,6 +3,7 @@ import { GripVertical } from "lucide-react";
 import type { DragEvent } from "react";
 import { useWatchPrefetch } from "../hooks/use-watch-prefetch";
 import { formatDuration, formatViews } from "../lib/format";
+import { proxyImage } from "../lib/proxy";
 import { isVideoWatched } from "../lib/watch-progress";
 import { watchRouteSearch } from "../lib/watch-url";
 import type { VideoStream } from "../types/stream";
@@ -43,7 +44,8 @@ type Props = {
 
 export function PlaylistVideoRow({ video, onRemove, reorderable, listId, onDragStart }: Props) {
   const prefetch = useWatchPrefetch(video.url);
-  const thumbnail = video.thumbnail.trim().length > 0 ? video.thumbnail : null;
+  const rawThumbnail = video.thumbnail.trim();
+  const thumbnail = rawThumbnail.length > 0 ? proxyImage(rawThumbnail) : null;
   const watched = video.watched || isVideoWatched(video.watchPosition, video.duration);
   const rawChannelName = video.channelName?.trim() ?? "";
   const rawChannelUrl = video.channelUrl?.trim() ?? "";
@@ -56,8 +58,8 @@ export function PlaylistVideoRow({ video, onRemove, reorderable, listId, onDragS
   const menuStream: VideoStream = {
     id: video.url,
     title: video.title,
-    thumbnail: video.thumbnail,
-    rawThumbnail: video.thumbnail,
+    thumbnail: thumbnail ?? "",
+    rawThumbnail,
     rawChannelAvatar: rawChannelAvatar,
     channelName,
     channelUrl: channelUrl || undefined,
diff --git a/apps/web/src/components/playlists-page-header.tsx b/apps/web/src/components/playlists-page-header.tsx
index 14fad42..91cd20c 100644
--- a/apps/web/src/components/playlists-page-header.tsx
+++ b/apps/web/src/components/playlists-page-header.tsx
@@ -17,8 +17,7 @@ export function PlaylistsPageHeader({
   onDelete,
   onCreate,
 }: Props) {
-  const base =
-    "rounded-lg bg-surface-strong px-3 py-2 text-sm transition-colors hover:bg-surface-soft";
+  const base = "rounded-lg px-3 py-2 text-sm transition-colors";
   return (
     <div className="flex flex-wrap items-center justify-between gap-3">
       <h1 className="font-semibold text-fg text-lg">Playlists</h1>
@@ -44,12 +43,16 @@ export function PlaylistsPageHeader({
               <button
                 type="button"
                 onClick={onSelect}
-                className={`${base} text-fg-muted hover:text-fg`}
+                className={`${base} border border-border bg-surface text-fg-muted hover:border-border-strong hover:text-fg`}
               >
                 Select
               </button>
             )}
-            <button type="button" onClick={onCreate} className={`${base} text-fg`}>
+            <button
+              type="button"
+              onClick={onCreate}
+              className={`${base} border border-border-strong bg-surface-strong text-fg hover:bg-surface-soft`}
+            >
               New playlist
             </button>
           </>
diff --git a/apps/web/src/components/quality-selector.tsx b/apps/web/src/components/quality-selector.tsx
index 7a15ef9..24be562 100644
--- a/apps/web/src/components/quality-selector.tsx
+++ b/apps/web/src/components/quality-selector.tsx
@@ -14,6 +14,7 @@ import {
 const qualityIcon: DefaultLayoutIcon = (props) => <ClipIcon {...props} />;
 const MENU_ITEMS_CLASS =
   "vds-menu-items max-h-[44svh] overflow-y-auto overscroll-y-contain pr-0.5 md:max-h-72 [scrollbar-width:thin] [scrollbar-color:var(--color-zinc-500)_transparent] [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-surface-soft/80 [&::-webkit-scrollbar-thumb:hover]:bg-surface-soft [&::-webkit-scrollbar-track]:bg-transparent";
+const QUALITY_OPTIONS = { sort: "descending" } as const;
 
 type QualityOption = ReturnType<typeof useVideoQualityOptions>[number];
 
@@ -42,7 +43,7 @@ function activeDashTrack(
 export function QualitySelector() {
   const menuRef = useRef<MenuInstance>(null);
   const { player, selectedVideoTrack } = useDashPlayerSnapshot();
-  const options = useVideoQualityOptions({ sort: "descending" });
+  const options = useVideoQualityOptions(QUALITY_OPTIONS);
 
   const dashTrack = player ? activeDashTrack(player, selectedVideoTrack) : null;
   if (player && dashTrack) {
diff --git a/apps/web/src/components/sponsorblock-current-segment.tsx b/apps/web/src/components/sponsorblock-current-segment.tsx
index 3e647d9..53dd940 100644
--- a/apps/web/src/components/sponsorblock-current-segment.tsx
+++ b/apps/web/src/components/sponsorblock-current-segment.tsx
@@ -1,10 +1,11 @@
 import { BadgeInfo, SkipForward } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
 import {
   getSponsorBlockCategoryLabel,
   getSponsorBlockEndTime,
   getSponsorBlockStartTime,
 } from "../lib/sponsorblock-settings";
-import { useMediaRemote, useMediaState } from "../lib/vidstack";
+import { useMediaPlayer, useMediaRemote } from "../lib/vidstack";
 import type { SponsorBlockSegmentItem } from "../types/api";
 
 type Props = {
@@ -14,6 +15,11 @@ type Props = {
   muteInsteadOfSkip: boolean;
 };
 
+type ActiveSegment = {
+  segment: SponsorBlockSegmentItem;
+  duration: number;
+};
+
 function includesSegment(
   segments: SponsorBlockSegmentItem[] | undefined,
   segment: SponsorBlockSegmentItem,
@@ -30,15 +36,62 @@ export function SponsorBlockCurrentSegment({
   muteInsteadOfSkip,
 }: Props) {
   const remote = useMediaRemote();
-  const currentTime = useMediaState("currentTime");
-  const duration = useMediaState("duration");
-  const current = segments.find(
-    (segment) =>
-      currentTime >= getSponsorBlockStartTime(segment, duration) &&
-      currentTime < getSponsorBlockEndTime(segment, duration),
-  );
+  const player = useMediaPlayer();
+  const [active, setActive] = useState<ActiveSegment | null>(null);
+  const activeKeyRef = useRef("");
+
+  useEffect(() => {
+    const root = player?.el;
+    if (!root) return;
+    const rootElement = root;
+    let cleanup: (() => void) | null = null;
+
+    function updateActive(media: HTMLMediaElement) {
+      const duration = Number.isFinite(media.duration) ? media.duration : 0;
+      const currentTime = Number.isFinite(media.currentTime) ? media.currentTime : 0;
+      const segment = segments.find(
+        (item) =>
+          currentTime >= getSponsorBlockStartTime(item, duration) &&
+          currentTime < getSponsorBlockEndTime(item, duration),
+      );
+      const nextKey = segment ? `${segment.category}:${segment.startTime}:${duration}` : "";
+      if (nextKey === activeKeyRef.current) return;
+      activeKeyRef.current = nextKey;
+      setActive(segment ? { segment, duration } : null);
+    }
+
+    function attach() {
+      if (cleanup) return true;
+      const media = rootElement.querySelector<HTMLMediaElement>("video,audio");
+      if (!media) return false;
+      const update = () => updateActive(media);
+      media.addEventListener("timeupdate", update);
+      media.addEventListener("seeking", update);
+      media.addEventListener("durationchange", update);
+      media.addEventListener("loadedmetadata", update);
+      update();
+      cleanup = () => {
+        media.removeEventListener("timeupdate", update);
+        media.removeEventListener("seeking", update);
+        media.removeEventListener("durationchange", update);
+        media.removeEventListener("loadedmetadata", update);
+      };
+      return true;
+    }
+
+    if (attach()) return () => cleanup?.();
+    const observer = new MutationObserver(() => {
+      if (attach()) observer.disconnect();
+    });
+    observer.observe(rootElement, { childList: true, subtree: true });
+    return () => {
+      observer.disconnect();
+      cleanup?.();
+    };
+  }, [player, segments]);
 
-  if (!current) return null;
+  if (!active) return null;
+  const { segment: current, duration } = active;
   const autoSkip = includesSegment(autoSkipSegments, current);
   const canSkip = includesSegment(manualSkipSegments, current) || !autoSkip || muteInsteadOfSkip;
 
diff --git a/apps/web/src/components/subscription-channel-list.tsx b/apps/web/src/components/subscription-channel-list.tsx
new file mode 100644
index 0000000..d13c333
--- /dev/null
+++ b/apps/web/src/components/subscription-channel-list.tsx
@@ -0,0 +1,40 @@
+import { formatExactDate } from "../lib/format";
+import { proxyImage } from "../lib/proxy";
+import type { SubscriptionItem } from "../types/user";
+import { ChannelAvatar } from "./channel-avatar";
+import { ChannelRouteLink } from "./channel-route-link";
+
+type Props = {
+  subscriptions: SubscriptionItem[];
+};
+
+function subscribedLabel(timestamp: number): string {
+  const date = formatExactDate(timestamp);
+  return date ? `Subscribed ${date}` : "Subscribed";
+}
+
+export function SubscriptionChannelList({ subscriptions }: Props) {
+  const sorted = [...subscriptions].sort((a, b) => a.name.localeCompare(b.name));
+
+  return (
+    <section className="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+      {sorted.map((item) => (
+        <ChannelRouteLink
+          key={item.channelUrl}
+          url={item.channelUrl}
+          className="group flex min-w-0 items-center gap-3 rounded-xl border border-border bg-surface/60 p-3 transition-colors hover:border-border-strong hover:bg-surface"
+        >
+          <ChannelAvatar src={proxyImage(item.avatarUrl)} name={item.name} className="h-12 w-12" />
+          <span className="min-w-0">
+            <span className="block truncate text-sm font-medium text-fg group-hover:text-fg-strong">
+              {item.name}
+            </span>
+            <span className="mt-0.5 block truncate text-xs text-fg-soft">
+              {subscribedLabel(item.subscribedAt)}
+            </span>
+          </span>
+        </ChannelRouteLink>
+      ))}
+    </section>
+  );
+}
diff --git a/apps/web/src/components/video-player-layout.tsx b/apps/web/src/components/video-player-layout.tsx
new file mode 100644
index 0000000..3629461
--- /dev/null
+++ b/apps/web/src/components/video-player-layout.tsx
@@ -0,0 +1,41 @@
+import { DefaultVideoLayout, defaultLayoutIcons } from "../lib/vidstack";
+import { AudioTrackSelector } from "./audio-track-selector";
+import { CinemaModeControl } from "./cinema-mode-control";
+import { FormatSelector } from "./format-selector";
+import { PlayerTrackButton } from "./player-track-button";
+import { QualitySelector } from "./quality-selector";
+
+type Props = {
+  thumbnailVtt?: string;
+  originalAudioLocale?: string | null;
+  onPreviousVideo?: () => void;
+  onNextVideo?: () => void;
+};
+
+export function VideoPlayerLayout({
+  thumbnailVtt,
+  originalAudioLocale,
+  onPreviousVideo,
+  onNextVideo,
+}: Props) {
+  return (
+    <DefaultVideoLayout
+      icons={defaultLayoutIcons}
+      thumbnails={thumbnailVtt}
+      smallLayoutWhen={false}
+      translations={{ Captions: "Subtitles" }}
+      slots={{
+        settingsMenuItemsStart: (
+          <>
+            <AudioTrackSelector originalLocale={originalAudioLocale} />
+            <QualitySelector />
+            <FormatSelector />
+          </>
+        ),
+        beforePlayButton: <PlayerTrackButton direction="previous" onClick={onPreviousVideo} />,
+        afterPlayButton: <PlayerTrackButton direction="next" onClick={onNextVideo} />,
+        beforeFullscreenButton: <CinemaModeControl />,
+      }}
+    />
+  );
+}
diff --git a/apps/web/src/components/video-player-types.ts b/apps/web/src/components/video-player-types.ts
index 1c02719..c74f793 100644
--- a/apps/web/src/components/video-player-types.ts
+++ b/apps/web/src/components/video-player-types.ts
@@ -33,6 +33,8 @@ export type VideoPlayerProps = {
   onError?: () => void;
   onSeekReady?: (seek: (seconds: number) => void) => void;
   onEnded?: () => void;
+  onPreviousVideo?: () => void;
+  onNextVideo?: () => void;
   className?: string;
   mediaClassName?: string;
 };
diff --git a/apps/web/src/components/video-player.tsx b/apps/web/src/components/video-player.tsx
index 1427d43..4c05381 100644
--- a/apps/web/src/components/video-player.tsx
+++ b/apps/web/src/components/video-player.tsx
@@ -1,29 +1,23 @@
 import { isIosDevice } from "../lib/ios-device";
-import {
-  DefaultVideoLayout,
-  defaultLayoutIcons,
-  MediaPlayer,
-  MediaProvider,
-  Track,
-} from "../lib/vidstack";
-import { AudioTrackSelector } from "./audio-track-selector";
+import { MediaPlayer, MediaProvider, Track } from "../lib/vidstack";
+import { patchVidstackProviderLoaders } from "../lib/vidstack-provider-loader-patch";
 import { CaptionStyleRestorer } from "./caption-style-restorer";
-import { CinemaModeControl } from "./cinema-mode-control";
-import { FormatSelector } from "./format-selector";
 import { MediaProgressEvents } from "./media-progress-events";
 import { MediaSessionSync } from "./media-session-sync";
 import { PlayerHotkeys } from "./player-hotkeys";
 import { PlayerSeeker, SeekBridge, SponsorBlockSkipper } from "./player-internals";
 import { PlayerPlayPauseIndicator } from "./player-play-pause-indicator";
-import { QualitySelector } from "./quality-selector";
 import { SponsorBlockBar } from "./sponsorblock-bar";
 import { SponsorBlockCurrentSegment } from "./sponsorblock-current-segment";
 import { buildSafeSubtitleTracks } from "./subtitle-track-utils";
 import { ChaptersTrack } from "./video-player-core";
 import { useVideoPlayerEvents } from "./video-player-events";
+import { VideoPlayerLayout } from "./video-player-layout";
 import type { VideoPlayerProps } from "./video-player-types";
 import { VolumeRestorer } from "./volume-restorer";
 
+patchVidstackProviderLoaders();
+
 export function VideoPlayer({
   src,
   title,
@@ -54,6 +48,8 @@ export function VideoPlayer({
   onError,
   onSeekReady,
   onEnded,
+  onPreviousVideo,
+  onNextVideo,
   className,
   mediaClassName,
 }: VideoPlayerProps) {
@@ -105,21 +101,11 @@ export function VideoPlayer({
         onEnded={handleEnded}
       />
       {overlay}
-      <DefaultVideoLayout
-        icons={defaultLayoutIcons}
-        thumbnails={thumbnailVtt}
-        smallLayoutWhen={false}
-        translations={{ Captions: "Subtitles" }}
-        slots={{
-          settingsMenuItemsStart: (
-            <>
-              <AudioTrackSelector originalLocale={originalAudioLocale} />
-              <QualitySelector />
-              <FormatSelector />
-            </>
-          ),
-          beforeFullscreenButton: <CinemaModeControl />,
-        }}
+      <VideoPlayerLayout
+        thumbnailVtt={thumbnailVtt}
+        originalAudioLocale={originalAudioLocale}
+        onPreviousVideo={onPreviousVideo}
+        onNextVideo={onNextVideo}
       />
       <PlayerSeeker startTime={startTime} />
       <VolumeRestorer
@@ -141,6 +127,8 @@ export function VideoPlayer({
         artwork={poster}
         canSeek={streamType !== "live"}
         isLive={streamType === "live"}
+        onPreviousTrack={onPreviousVideo}
+        onNextTrack={onNextVideo}
       />
       <PlayerHotkeys canSeek={streamType !== "live"} />
       <PlayerPlayPauseIndicator />
diff --git a/apps/web/src/components/volume-restorer.tsx b/apps/web/src/components/volume-restorer.tsx
index 9fdd391..60076a9 100644
--- a/apps/web/src/components/volume-restorer.tsx
+++ b/apps/web/src/components/volume-restorer.tsx
@@ -25,6 +25,7 @@ export function VolumeRestorer({
   const resumeOnReturnRef = useRef(false);
   const retryTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const retryCountRef = useRef(0);
+  const mountedRef = useRef(true);
 
   const clearRetry = useCallback(() => {
     if (retryTimerRef.current) {
@@ -34,8 +35,9 @@ export function VolumeRestorer({
     retryCountRef.current = 0;
   }, []);
 
-  const attemptPlay = useCallback(() => {
-    return Promise.resolve(remote.play());
+  const attemptPlay = useCallback(async () => {
+    if (!mountedRef.current) return;
+    await remote.play();
   }, [remote]);
 
   const tryPlay = useCallback(
@@ -44,6 +46,7 @@ export function VolumeRestorer({
       if (!force && !autoplay) return;
       void attemptPlay()
         .then(() => {
+          if (!mountedRef.current) return;
           clearRetry();
           if (force) resumeOnReturnRef.current = false;
         })
@@ -55,6 +58,7 @@ export function VolumeRestorer({
           if (retryTimerRef.current) clearTimeout(retryTimerRef.current);
           retryTimerRef.current = setTimeout(() => {
             retryTimerRef.current = null;
+            if (!mountedRef.current) return;
             void attemptPlay()
               .then(() => clearRetry())
               .catch(() => {});
@@ -108,7 +112,9 @@ export function VolumeRestorer({
   }, [settingsReady, paused, tryPlay]);
 
   useEffect(() => {
+    mountedRef.current = true;
     return () => {
+      mountedRef.current = false;
       clearRetry();
     };
   }, [clearRetry]);
diff --git a/apps/web/src/components/watch-layout.tsx b/apps/web/src/components/watch-layout.tsx
index 524ee14..9e92acd 100644
--- a/apps/web/src/components/watch-layout.tsx
+++ b/apps/web/src/components/watch-layout.tsx
@@ -11,11 +11,7 @@ import { useWatchVttAssets } from "../hooks/use-watch-layout-assets";
 import { useWatchPlayerEvents } from "../hooks/use-watch-player-events";
 import { useWatchPlaylist } from "../hooks/use-watch-playlist";
 import { useWatchSponsorBlock } from "../hooks/use-watch-sponsorblock";
-import {
-  getOriginalAudioLocale,
-  getOriginalAudioTrackId,
-  getPreferredDefaultAudioTrackId,
-} from "../lib/audio-track";
+import { getOriginalAudioLocale } from "../lib/audio-track";
 import { detectProvider } from "../lib/provider";
 import { useDanmakuStore } from "../stores/danmaku-store";
 import { useWatchLayoutStore } from "../stores/watch-layout-store";
@@ -107,17 +103,18 @@ export function WatchLayout({ stream, startTime, currentParam, navigating, list,
       bulletCommentsOn={bulletCommentsOn}
       bulletComments={bulletComments}
       positionRef={playerEvents.positionRef}
+      stream={stream}
       settings={settings}
       qualityFailed={qualityFailed}
       onOriginalLanguageUnavailable={() => setToast("Original audio unavailable")}
-      originalAudioTrackId={getOriginalAudioTrackId(stream)}
-      preferredDefaultAudioTrackId={getPreferredDefaultAudioTrackId(stream)}
       originalAudioLocale={originalLocale}
     />
   );
 
-  const hasSecondaryContent = Boolean(!isMobile && (playlist.panel || relatedStreams.length > 0));
-  const classes = getWatchLayoutClasses(cinemaMode, hasSecondaryContent);
+  const classes = getWatchLayoutClasses(
+    cinemaMode,
+    Boolean(!isMobile && (playlist.panel || relatedStreams.length > 0)),
+  );
 
   return (
     <div className={classes.containerClass}>
@@ -153,6 +150,8 @@ export function WatchLayout({ stream, startTime, currentParam, navigating, list,
         onAutoplayPlayNow={autoplay.playNow}
         onAutoplayCancel={autoplay.cancel}
         onAutoplayPauseToggle={autoplay.togglePause}
+        onPreviousVideo={playlist.playPrevious}
+        onNextVideo={playlist.playNext}
         onError={handlePlayerError}
         onReset={reset}
       />
diff --git a/apps/web/src/components/watch-player-overlay.tsx b/apps/web/src/components/watch-player-overlay.tsx
index 98f5273..e506d4c 100644
--- a/apps/web/src/components/watch-player-overlay.tsx
+++ b/apps/web/src/components/watch-player-overlay.tsx
@@ -1,5 +1,7 @@
 import type { RefObject } from "react";
+import { getOriginalAudioTrackId, getPreferredDefaultAudioTrackId } from "../lib/audio-track";
 import type { BulletCommentItem } from "../types/api";
+import type { VideoStream } from "../types/stream";
 import type { SettingsItem } from "../types/user";
 import { DanmakuOverlay } from "./danmaku-overlay";
 import { WatchPlayerDefaults } from "./watch-player-defaults";
@@ -10,10 +12,9 @@ type Props = {
   bulletCommentsOn: boolean;
   bulletComments: BulletCommentItem[] | undefined;
   positionRef: RefObject<number>;
+  stream: VideoStream;
   settings: SettingsItem;
   qualityFailed: boolean;
-  originalAudioTrackId: string | null;
-  preferredDefaultAudioTrackId: string | null;
   originalAudioLocale: string | null;
   onOriginalLanguageUnavailable: () => void;
 };
@@ -24,10 +25,9 @@ export function WatchPlayerOverlay({
   bulletCommentsOn,
   bulletComments,
   positionRef,
+  stream,
   settings,
   qualityFailed,
-  originalAudioTrackId,
-  preferredDefaultAudioTrackId,
   originalAudioLocale,
   onOriginalLanguageUnavailable,
 }: Props) {
@@ -40,8 +40,8 @@ export function WatchPlayerOverlay({
         settings={settings}
         qualityFailed={qualityFailed}
         onOriginalLanguageUnavailable={onOriginalLanguageUnavailable}
-        originalAudioTrackId={originalAudioTrackId}
-        preferredDefaultAudioTrackId={preferredDefaultAudioTrackId}
+        originalAudioTrackId={getOriginalAudioTrackId(stream)}
+        preferredDefaultAudioTrackId={getPreferredDefaultAudioTrackId(stream)}
         originalAudioLocale={originalAudioLocale}
       />
     </>
diff --git a/apps/web/src/components/watch-stage.tsx b/apps/web/src/components/watch-stage.tsx
index ef530f6..86b3c87 100644
--- a/apps/web/src/components/watch-stage.tsx
+++ b/apps/web/src/components/watch-stage.tsx
@@ -43,6 +43,8 @@ type Props = {
   onAutoplayPlayNow: () => void;
   onAutoplayCancel: () => void;
   onAutoplayPauseToggle: () => void;
+  onPreviousVideo?: () => void;
+  onNextVideo?: () => void;
   onError: () => void;
   onReset: () => void;
 };
@@ -79,6 +81,8 @@ export function WatchStage({
   onAutoplayPlayNow,
   onAutoplayCancel,
   onAutoplayPauseToggle,
+  onPreviousVideo,
+  onNextVideo,
   onError,
   onReset,
 }: Props) {
@@ -121,6 +125,8 @@ export function WatchStage({
               onSeeked={onSeeked}
               onError={onError}
               onEnded={onEnded}
+              onPreviousVideo={onPreviousVideo}
+              onNextVideo={onNextVideo}
               onSeekReady={(seek) => (seekRef.current = seek)}
               className={classes.playerClassName}
               mediaClassName={classes.mediaClassName}
diff --git a/apps/web/src/hooks/use-admin-granular-allow-list.ts b/apps/web/src/hooks/use-admin-granular-allow-list.ts
index bf0934f..d3c20da 100644
--- a/apps/web/src/hooks/use-admin-granular-allow-list.ts
+++ b/apps/web/src/hooks/use-admin-granular-allow-list.ts
@@ -1,9 +1,10 @@
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useInfiniteQuery, useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import {
   addAdminAllowedPlaylist,
   addAdminUserAllowedChannel,
   addAdminUserAllowedPlaylist,
   fetchAdminAllowedPlaylists,
+  fetchAdminManagedAccessUsers,
   fetchAdminUserAllowList,
   removeAdminAllowedPlaylist,
   removeAdminUserAllowedChannel,
@@ -11,11 +12,13 @@ import {
   searchAdminUsers,
   updateAdminUserAccessMode,
 } from "../lib/api-admin-allow-list";
-import type { AllowPlaylistInput } from "../types/allow-list";
+import type { AdminUserAllowList, AllowPlaylistInput } from "../types/allow-list";
 import type { ChannelResultItem } from "../types/api";
 import type { AccessMode } from "../types/user";
 
 const ADMIN_ALLOWED_PLAYLISTS_KEY = ["admin-allowed-playlists"];
+const ADMIN_MANAGED_ACCESS_USERS_KEY = ["admin-managed-access-users"];
+const ADMIN_USERS_SEARCH_KEY = ["admin-users-search"];
 const adminUserAllowListKey = (id: string) => ["admin-user-allow-list", id];
 
 export function useAdminAllowedPlaylists(enabled: boolean) {
@@ -29,13 +32,25 @@ export function useAdminAllowedPlaylists(enabled: boolean) {
 export function useAdminUserSearch(query: string, enabled: boolean) {
   const q = query.trim();
   return useQuery({
-    queryKey: ["admin-users-search", q],
+    queryKey: [...ADMIN_USERS_SEARCH_KEY, q],
     queryFn: () => searchAdminUsers(q, 20),
     enabled: enabled && q.length >= 2,
     staleTime: 30 * 1000,
   });
 }
 
+export function useAdminAllowListUsers(enabled: boolean) {
+  return useInfiniteQuery({
+    queryKey: ADMIN_MANAGED_ACCESS_USERS_KEY,
+    queryFn: ({ pageParam }: { pageParam: string | undefined }) =>
+      fetchAdminManagedAccessUsers(100, pageParam),
+    initialPageParam: undefined as string | undefined,
+    getNextPageParam: (lastPage) => lastPage.nextpage ?? undefined,
+    enabled,
+    staleTime: 30 * 1000,
+  });
+}
+
 export function useAdminUserAllowList(userId: string | null) {
   return useQuery({
     queryKey: userId ? adminUserAllowListKey(userId) : ["admin-user-allow-list", "none"],
@@ -49,22 +64,45 @@ export function useAdminAllowListMutations(selectedUserId: string | null) {
   const refreshUser = () => {
     if (selectedUserId) qc.invalidateQueries({ queryKey: adminUserAllowListKey(selectedUserId) });
   };
+  const setUserMode = (id: string, accessMode: AccessMode) => {
+    qc.setQueryData<AdminUserAllowList>(adminUserAllowListKey(id), (current) =>
+      current
+        ? {
+            ...current,
+            user: { ...current.user, accessMode, adminManagedAccessMode: true },
+          }
+        : current,
+    );
+  };
+  const refreshManagedUsers = () => {
+    qc.invalidateQueries({ queryKey: ADMIN_MANAGED_ACCESS_USERS_KEY });
+    qc.invalidateQueries({ queryKey: ADMIN_USERS_SEARCH_KEY });
+  };
   const refreshGlobalPlaylists = () =>
     qc.invalidateQueries({ queryKey: ADMIN_ALLOWED_PLAYLISTS_KEY });
   const userMode = useMutation({
     mutationFn: ({ id, accessMode }: { id: string; accessMode: AccessMode }) =>
       updateAdminUserAccessMode(id, accessMode),
-    onSuccess: refreshUser,
+    onSuccess: (accessMode, { id }) => {
+      setUserMode(id, accessMode);
+      refreshManagedUsers();
+    },
   });
   const addUserChannel = useMutation({
     mutationFn: ({ id, channel }: { id: string; channel: ChannelResultItem }) =>
       addAdminUserAllowedChannel(id, channel.url, channel.name, channel.thumbnailUrl),
-    onSuccess: refreshUser,
+    onSuccess: () => {
+      refreshUser();
+      refreshManagedUsers();
+    },
   });
   const removeUserChannel = useMutation({
     mutationFn: ({ id, url }: { id: string; url: string }) =>
       removeAdminUserAllowedChannel(id, url),
-    onSuccess: refreshUser,
+    onSuccess: () => {
+      refreshUser();
+      refreshManagedUsers();
+    },
   });
   const addGlobalPlaylist = useMutation({
     mutationFn: addAdminAllowedPlaylist,
@@ -77,12 +115,18 @@ export function useAdminAllowListMutations(selectedUserId: string | null) {
   const addUserPlaylist = useMutation({
     mutationFn: ({ id, playlist }: { id: string; playlist: AllowPlaylistInput }) =>
       addAdminUserAllowedPlaylist(id, playlist),
-    onSuccess: refreshUser,
+    onSuccess: () => {
+      refreshUser();
+      refreshManagedUsers();
+    },
   });
   const removeUserPlaylist = useMutation({
     mutationFn: ({ id, url }: { id: string; url: string }) =>
       removeAdminUserAllowedPlaylist(id, url),
-    onSuccess: refreshUser,
+    onSuccess: () => {
+      refreshUser();
+      refreshManagedUsers();
+    },
   });
   return {
     userMode,
diff --git a/apps/web/src/hooks/use-favorite-streams.ts b/apps/web/src/hooks/use-favorite-streams.ts
index 7e91029..847d204 100644
--- a/apps/web/src/hooks/use-favorite-streams.ts
+++ b/apps/web/src/hooks/use-favorite-streams.ts
@@ -1,18 +1,32 @@
-import { useQueries, useQuery } from "@tanstack/react-query";
+import { useQuery } from "@tanstack/react-query";
 import { fetchFavorites } from "../lib/api-collections";
-import { fetchStream } from "../lib/api-stream";
-import { mapStreamResponse } from "../lib/mappers";
+import { proxyImage } from "../lib/proxy";
 import type { VideoStream } from "../types/stream";
+import type { FavoriteItem } from "../types/user";
 import { useAuth } from "./use-auth";
 
-function isVideoStream(value: VideoStream | undefined): value is VideoStream {
-  return value !== undefined;
-}
-
 type UseFavoriteStreamsOptions = {
   limit?: number;
 };
 
+function mapFavoriteItem(item: FavoriteItem): VideoStream {
+  const rawThumbnail = item.thumbnail ?? "";
+  const rawChannelAvatar = item.channelAvatar ?? "";
+  return {
+    id: item.videoUrl,
+    title: item.title ?? "",
+    thumbnail: proxyImage(rawThumbnail),
+    rawThumbnail,
+    rawChannelAvatar,
+    channelName: item.channelName ?? "",
+    channelUrl: item.channelUrl || undefined,
+    channelAvatar: proxyImage(rawChannelAvatar),
+    views: item.viewCount ?? 0,
+    duration: item.duration ?? 0,
+    publishedAt: item.publishedAt && item.publishedAt > 0 ? item.publishedAt : undefined,
+  };
+}
+
 export function useFavoriteStreams(options: UseFavoriteStreamsOptions = {}) {
   const { authReady, isAuthed } = useAuth();
   const favorites = useQuery({
@@ -24,19 +38,11 @@ export function useFavoriteStreams(options: UseFavoriteStreamsOptions = {}) {
     options.limit === undefined
       ? (favorites.data ?? [])
       : (favorites.data ?? []).slice(0, options.limit);
-  const streams = useQueries({
-    queries: items.map((item) => ({
-      queryKey: ["favorite-stream", item.videoUrl],
-      queryFn: () =>
-        fetchStream(item.videoUrl).then((res) => mapStreamResponse(res, item.videoUrl)),
-      enabled: favorites.isSuccess,
-    })),
-  });
 
   return {
     count: favorites.data?.length ?? 0,
     requestedCount: items.length,
-    videos: streams.map((query) => query.data).filter(isVideoStream),
-    isLoading: favorites.isLoading || streams.some((query) => query.isLoading),
+    videos: items.map(mapFavoriteItem),
+    isLoading: favorites.isLoading,
   };
 }
diff --git a/apps/web/src/hooks/use-history.ts b/apps/web/src/hooks/use-history.ts
index cac98b5..72c96f5 100644
--- a/apps/web/src/hooks/use-history.ts
+++ b/apps/web/src/hooks/use-history.ts
@@ -1,3 +1,4 @@
+import type { InfiniteData } from "@tanstack/react-query";
 import { useInfiniteQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import { updateProgress } from "../lib/api-collections";
 import { addHistory, clearHistory, fetchHistory, removeHistory } from "../lib/api-user";
@@ -6,43 +7,33 @@ import { useAuth } from "./use-auth";
 import { useDebouncedValue } from "./use-debounced-value";
 
 const PAGE_SIZE = 40;
-const CLEAR_PAGE_SIZE = 100;
-const RESET_PROGRESS_CONCURRENCY = 4;
 
 const historyKey = (q: string) => ["history", q];
 
+type HistoryPage = {
+  items: HistoryItem[];
+  total: number;
+};
+
+type HistoryInfiniteData = InfiniteData<HistoryPage, number>;
+
 type RemoveHistoryPayload = {
   id: string;
   url: string;
 };
 
-async function fetchAllHistoryUrls(): Promise<string[]> {
-  const urls: string[] = [];
-  let offset = 0;
-  let total = Number.MAX_SAFE_INTEGER;
-
-  while (offset < total) {
-    const page = await fetchHistory({ limit: CLEAR_PAGE_SIZE, offset });
-    urls.push(...page.items.map((item) => item.url));
-    total = page.total;
-    if (page.items.length === 0) break;
-    offset += page.items.length;
-  }
-
-  return [...new Set(urls)];
-}
-
-async function resetProgressForUrls(urls: string[]): Promise<void> {
-  for (let index = 0; index < urls.length; index += RESET_PROGRESS_CONCURRENCY) {
-    const batch = urls.slice(index, index + RESET_PROGRESS_CONCURRENCY);
-    await Promise.all(batch.map((url) => updateProgress(url, 0)));
-  }
-}
-
 function clearedProgress(url: string): ProgressItem {
   return { videoUrl: url, position: 0, updatedAt: Date.now() };
 }
 
+function emptyHistoryData(data: HistoryInfiniteData | undefined): HistoryInfiniteData | undefined {
+  if (!data) return data;
+  return {
+    ...data,
+    pages: data.pages.map((page) => ({ ...page, items: [], total: 0 })),
+  };
+}
+
 export function useHistory(searchQuery = "") {
   const qc = useQueryClient();
   const { authReady, isAuthed } = useAuth();
@@ -95,18 +86,19 @@ export function useHistory(searchQuery = "") {
 
   const clear = useMutation({
     mutationFn: async () => {
-      if (!isAuthed) return [];
-      const urls = await fetchAllHistoryUrls();
-      await resetProgressForUrls(urls);
+      if (!isAuthed) return;
       await clearHistory();
-      return urls;
     },
-    onSuccess: (urls) => {
-      for (const url of urls) qc.setQueryData(["progress", url], clearedProgress(url));
+    onSuccess: () => {
+      qc.setQueriesData<HistoryInfiniteData>({ queryKey: ["history"] }, emptyHistoryData);
+      qc.setQueriesData<HistoryPage>({ queryKey: ["history-filtered"] }, (data) =>
+        data ? { ...data, items: [], total: 0 } : data,
+      );
+      qc.removeQueries({ queryKey: ["progress"] });
       return qc
         .invalidateQueries({ queryKey: ["history"] })
-        .then(() => qc.invalidateQueries({ queryKey: ["history-all"] }))
-        .then(() => qc.invalidateQueries({ queryKey: ["progress"] }));
+        .then(() => qc.invalidateQueries({ queryKey: ["history-filtered"] }))
+        .then(() => qc.invalidateQueries({ queryKey: ["history-all"] }));
     },
   });
 
diff --git a/apps/web/src/hooks/use-search-history.ts b/apps/web/src/hooks/use-search-history.ts
index 286f2a5..c77474b 100644
--- a/apps/web/src/hooks/use-search-history.ts
+++ b/apps/web/src/hooks/use-search-history.ts
@@ -1,10 +1,31 @@
+import type { InfiniteData } from "@tanstack/react-query";
 import { useInfiniteQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import { addSearchHistory, clearSearchHistory, fetchSearchHistoryPage } from "../lib/api-user";
+import type { SearchHistoryItem } from "../types/user";
 import { useAuth } from "./use-auth";
 
 const KEY = ["search-history"];
 const PAGE_SIZE = 8;
 
+type SearchHistoryPage = {
+  items: SearchHistoryItem[];
+  total: number;
+  page: number;
+  limit: number;
+};
+
+type SearchHistoryData = InfiniteData<SearchHistoryPage, number>;
+
+function emptySearchHistoryData(
+  data: SearchHistoryData | undefined,
+): SearchHistoryData | undefined {
+  if (!data) return data;
+  return {
+    ...data,
+    pages: data.pages.map((page) => ({ ...page, items: [], total: 0 })),
+  };
+}
+
 export function useSearchHistory() {
   const qc = useQueryClient();
   const { authReady, isAuthed } = useAuth();
@@ -37,6 +58,7 @@ export function useSearchHistory() {
   const clear = useMutation({
     mutationFn: () => (isAuthed ? clearSearchHistory() : Promise.resolve()),
     onSuccess: () => {
+      qc.setQueryData<SearchHistoryData>(KEY, emptySearchHistoryData);
       qc.invalidateQueries({ queryKey: KEY });
     },
   });
diff --git a/apps/web/src/hooks/use-settings.ts b/apps/web/src/hooks/use-settings.ts
index bc07ab0..2fa508d 100644
--- a/apps/web/src/hooks/use-settings.ts
+++ b/apps/web/src/hooks/use-settings.ts
@@ -28,6 +28,7 @@ const DEFAULTS: SettingsItem = {
   sponsorBlockManualSkipOnFullVideo: true,
   sponsorBlockSkipNonMusicOnlyOnMusicVideos: false,
   sponsorBlockMuteInsteadOfSkip: false,
+  disableWatchHistory: false,
   hideContinueWatching: false,
   hideHomeRecommendations: false,
   hideRelatedVideos: false,
diff --git a/apps/web/src/hooks/use-watch-playlist.tsx b/apps/web/src/hooks/use-watch-playlist.tsx
index d6288fa..4d283aa 100644
--- a/apps/web/src/hooks/use-watch-playlist.tsx
+++ b/apps/web/src/hooks/use-watch-playlist.tsx
@@ -15,6 +15,8 @@ const PREFETCH_REMAINING_ITEMS = 10;
 type WatchPlaylist = {
   nextParam: string | null;
   nextVideo: WatchPlaylistItem | null;
+  playPrevious?: () => void;
+  playNext?: () => void;
   panel: ReactNode;
 };
 
@@ -63,8 +65,26 @@ export function useWatchPlaylist(
   const loadMorePublic = useCallback(() => {
     if (canLoadPublicPage) void publicPlaylist.fetchNextPage();
   }, [canLoadPublicPage, publicPlaylist.fetchNextPage]);
+  const previousVideo = currentIdx > 0 ? videos[currentIdx - 1] : undefined;
   const nextVideo = currentIdx >= 0 ? videos[currentIdx + 1] : undefined;
+  const previousParam = previousVideo ? toPublicWatchParam(previousVideo.url) : null;
   const nextParam = nextVideo ? toPublicWatchParam(nextVideo.url) : null;
+  const playPrevious = useCallback(() => {
+    if (!previousParam) return;
+    navigate({
+      to: "/watch",
+      search: { v: previousParam, list, ...(shuffle ? { shuffle } : {}) },
+      resetScroll: false,
+    });
+  }, [previousParam, list, shuffle, navigate]);
+  const playNext = useCallback(() => {
+    if (!nextParam) return;
+    navigate({
+      to: "/watch",
+      search: { v: nextParam, list, ...(shuffle ? { shuffle } : {}) },
+      resetScroll: false,
+    });
+  }, [nextParam, list, shuffle, navigate]);
 
   useEffect(() => {
     if (!canLoadPublicPage || videos.length === 0) return;
@@ -110,5 +130,11 @@ export function useWatchPlaylist(
       />
     ) : null;
 
-  return { nextParam, nextVideo: nextVideo ?? null, panel };
+  return {
+    nextParam,
+    nextVideo: nextVideo ?? null,
+    playPrevious: previousParam ? playPrevious : undefined,
+    playNext: nextParam ? playNext : undefined,
+    panel,
+  };
 }
diff --git a/apps/web/src/index.css b/apps/web/src/index.css
index 01ac79c..d42df48 100644
--- a/apps/web/src/index.css
+++ b/apps/web/src/index.css
@@ -174,3 +174,9 @@ body {
 .vds-playback-menu .vds-menu-section:has(.vds-quality-slider) {
   display: none;
 }
+
+@media (max-width: 639px) {
+  .vds-video-layout .typetype-track-button {
+    display: none;
+  }
+}
diff --git a/apps/web/src/lib/api-admin-allow-list.ts b/apps/web/src/lib/api-admin-allow-list.ts
index c5bc1fe..7526c7b 100644
--- a/apps/web/src/lib/api-admin-allow-list.ts
+++ b/apps/web/src/lib/api-admin-allow-list.ts
@@ -1,5 +1,6 @@
 import type {
   AdminAllowListUser,
+  AdminManagedAccessUsersPage,
   AdminUserAllowList,
   AllowedPlaylistItem,
   AllowPlaylistInput,
@@ -14,6 +15,15 @@ export function searchAdminUsers(q: string, limit = 20): Promise<AdminAllowListU
   return authedJson(`${BASE}/admin/users/search?${params}`);
 }
 
+export function fetchAdminManagedAccessUsers(
+  limit = 100,
+  page?: string,
+): Promise<AdminManagedAccessUsersPage> {
+  const params = new URLSearchParams({ limit: String(limit) });
+  if (page) params.set("page", page);
+  return authedJson(`${BASE}/admin/users/managed-access?${params}`);
+}
+
 export function fetchAdminUserAllowList(id: string): Promise<AdminUserAllowList> {
   return authedJson(`${BASE}/admin/users/${encodeURIComponent(id)}/allow-list`);
 }
diff --git a/apps/web/src/lib/api-downloader.ts b/apps/web/src/lib/api-downloader.ts
index 16a42cd..b650724 100644
--- a/apps/web/src/lib/api-downloader.ts
+++ b/apps/web/src/lib/api-downloader.ts
@@ -99,64 +99,20 @@ export async function deleteDownloaderJob(jobId: string): Promise<void> {
   throw new ApiError(readErrorMessage(body, "Failed to delete download job"), res.status);
 }
 
-function extensionFromType(contentType: string | null): string {
-  const value = contentType ?? "";
-  if (value.includes("video/mp4")) return "mp4";
-  if (value.includes("audio/mpeg")) return "mp3";
-  if (value.includes("audio/webm")) return "webm";
-  if (value.includes("audio/mp4")) return "m4a";
-  return "bin";
-}
-
-function filenameFromHeader(contentDisposition: string | null): string | null {
-  const value = contentDisposition ?? "";
-  const utf8 = value.match(/filename\*=UTF-8''([^;]+)/i);
-  if (utf8?.[1]) return decodeURIComponent(utf8[1]);
-  const classic = value.match(/filename="?([^";]+)"?/i);
-  return classic?.[1] ?? null;
-}
-
-function canUseShareApi(): boolean {
-  if (typeof navigator === "undefined") return false;
-  return typeof navigator.share === "function";
-}
-
-function supportsFileShare(data: ShareData): boolean {
-  if (typeof navigator === "undefined") return false;
-  if (typeof navigator.canShare !== "function") return false;
-  return navigator.canShare(data);
-}
-
-function fallbackFileName(jobId: string, headers: Headers): string {
-  return (
-    filenameFromHeader(headers.get("content-disposition")) ??
-    `typetype-download-${jobId}.${extensionFromType(headers.get("content-type"))}`
-  );
-}
-
-async function shareDownloaderArtifact(endpoint: string, jobId: string): Promise<void> {
-  const res = await fetch(endpoint);
-  if (!res.ok) {
-    const body = await readJson(res);
-    throw new ApiError(readErrorMessage(body, "Failed to download artifact"), res.status);
+function openArtifactLocation(endpoint: string, preferNewContext = false): void {
+  if (preferNewContext) {
+    const opened = window.open("about:blank", "_blank");
+    if (opened) {
+      opened.opener = null;
+      opened.location.href = endpoint;
+      return;
+    }
   }
-  const blob = await res.blob();
-  const fileName = fallbackFileName(jobId, res.headers);
-  const fileType = blob.type.length > 0 ? blob.type : "application/octet-stream";
-  const file = new File([blob], fileName, { type: fileType });
-  const shareData: ShareData = { files: [file], title: fileName };
-  if (!supportsFileShare(shareData)) {
-    throw new ApiError("Native iOS share is unavailable for this file", 422);
-  }
-  await navigator.share(shareData);
-}
-
-function openArtifactLocation(endpoint: string): void {
   window.location.assign(endpoint);
 }
 
 export function canUseIosShareFlow(): boolean {
-  return isIosWebKitBrowser() && canUseShareApi();
+  return isIosWebKitBrowser();
 }
 
 export async function downloadDownloaderArtifact(
@@ -165,7 +121,7 @@ export async function downloadDownloaderArtifact(
 ): Promise<void> {
   const endpoint = `${BASE}/downloader/jobs/${encodeURIComponent(jobId)}/artifact`;
   if (options.preferShare && canUseIosShareFlow()) {
-    await shareDownloaderArtifact(endpoint, jobId);
+    openArtifactLocation(endpoint, true);
     return;
   }
   openArtifactLocation(endpoint);
diff --git a/apps/web/src/lib/api-user.ts b/apps/web/src/lib/api-user.ts
index b5582e2..b8254d7 100644
--- a/apps/web/src/lib/api-user.ts
+++ b/apps/web/src/lib/api-user.ts
@@ -50,11 +50,13 @@ export async function addHistory(item: Omit<HistoryItem, "id" | "watchedAt">): P
 }
 
 export async function removeHistory(id: string): Promise<void> {
-  await authed(`${BASE}/history/${encodeURIComponent(id)}`, { method: "DELETE" });
+  const res = await authed(`${BASE}/history/${encodeURIComponent(id)}`, { method: "DELETE" });
+  if (!res.ok) throw new ApiError("Failed to remove history item", res.status);
 }
 
 export async function clearHistory(): Promise<void> {
-  await authed(`${BASE}/history`, { method: "DELETE" });
+  const res = await authed(`${BASE}/history`, { method: "DELETE" });
+  if (!res.ok) throw new ApiError("Failed to clear history", res.status);
 }
 
 export function fetchSubscriptions(): Promise<SubscriptionItem[]> {
diff --git a/apps/web/src/lib/console-warning-filter.ts b/apps/web/src/lib/console-warning-filter.ts
new file mode 100644
index 0000000..2038ee9
--- /dev/null
+++ b/apps/web/src/lib/console-warning-filter.ts
@@ -0,0 +1,22 @@
+const MAX_UPDATE_DEPTH = "Maximum update depth exceeded";
+
+declare global {
+  var typetypeVidstackReactWarningFilterInstalled: boolean | undefined;
+}
+
+function isVidstackMaximumUpdateWarning(args: Parameters<typeof console.error>): boolean {
+  const first = args[0];
+  if (typeof first !== "string" || !first.includes(MAX_UPDATE_DEPTH)) return false;
+  const stack = new Error().stack ?? "";
+  return stack.includes("vidstack-") || stack.includes("@vidstack");
+}
+
+export function installConsoleWarningFilter() {
+  if (globalThis.typetypeVidstackReactWarningFilterInstalled) return;
+  globalThis.typetypeVidstackReactWarningFilterInstalled = true;
+  const originalError = console.error.bind(console);
+  console.error = (...args: Parameters<typeof console.error>) => {
+    if (isVidstackMaximumUpdateWarning(args)) return;
+    originalError(...args);
+  };
+}
diff --git a/apps/web/src/lib/history-enrichment.ts b/apps/web/src/lib/history-enrichment.ts
deleted file mode 100644
index ddf956c..0000000
--- a/apps/web/src/lib/history-enrichment.ts
+++ /dev/null
@@ -1,84 +0,0 @@
-import type { StreamResponse } from "../types/api";
-import type { HistoryItem } from "../types/user";
-import { fetchStream } from "./api-stream";
-
-const CACHE_MS = 30 * 60 * 1000;
-
-type CacheEntry = {
-  updatedAt: number;
-  avatarUrl: string;
-  uploaderVerified: boolean;
-};
-
-type HistoryChannelMeta = {
-  avatarUrl: string | null;
-  uploaderVerified: boolean;
-};
-
-const avatarCache = new Map<string, CacheEntry>();
-const pendingByChannel = new Map<string, Promise<HistoryChannelMeta>>();
-
-function fromStream(stream: StreamResponse): HistoryChannelMeta {
-  return {
-    avatarUrl:
-      stream.uploaderAvatarUrl && stream.uploaderAvatarUrl.length > 0
-        ? stream.uploaderAvatarUrl
-        : null,
-    uploaderVerified: stream.uploaderVerified,
-  };
-}
-
-function cached(channelUrl: string): HistoryChannelMeta | null {
-  const hit = avatarCache.get(channelUrl);
-  if (!hit) return null;
-  if (Date.now() - hit.updatedAt > CACHE_MS) {
-    avatarCache.delete(channelUrl);
-    return null;
-  }
-  return { avatarUrl: hit.avatarUrl || null, uploaderVerified: hit.uploaderVerified };
-}
-
-function setCache(channelUrl: string, meta: HistoryChannelMeta): void {
-  avatarCache.set(channelUrl, {
-    avatarUrl: meta.avatarUrl ?? "",
-    uploaderVerified: meta.uploaderVerified,
-    updatedAt: Date.now(),
-  });
-}
-
-export async function resolveHistoryChannelMeta(item: HistoryItem): Promise<HistoryChannelMeta> {
-  const current = {
-    avatarUrl: item.channelAvatar ?? null,
-    uploaderVerified: item.uploaderVerified ?? false,
-  };
-  if (item.channelAvatar && item.uploaderVerified !== undefined) return current;
-  const channelUrl = item.channelUrl;
-  if (!channelUrl) return current;
-  const hit = cached(channelUrl);
-  if (hit)
-    return {
-      avatarUrl: current.avatarUrl ?? hit.avatarUrl,
-      uploaderVerified: hit.uploaderVerified,
-    };
-  const pending = pendingByChannel.get(channelUrl);
-  if (pending)
-    return pending.then((meta) => ({ ...meta, avatarUrl: current.avatarUrl ?? meta.avatarUrl }));
-  const task = (async () => {
-    try {
-      const stream = await fetchStream(item.url);
-      const meta = fromStream(stream);
-      setCache(channelUrl, meta);
-      return meta;
-    } catch {
-      return current;
-    } finally {
-      pendingByChannel.delete(channelUrl);
-    }
-  })();
-  pendingByChannel.set(channelUrl, task);
-  return task;
-}
-
-export async function resolveHistoryAvatar(item: HistoryItem): Promise<string | null> {
-  return resolveHistoryChannelMeta(item).then((meta) => meta.avatarUrl);
-}
diff --git a/apps/web/src/lib/vidstack-provider-loader-patch.ts b/apps/web/src/lib/vidstack-provider-loader-patch.ts
new file mode 100644
index 0000000..b2c8e22
--- /dev/null
+++ b/apps/web/src/lib/vidstack-provider-loader-patch.ts
@@ -0,0 +1,28 @@
+import type { MediaContext, MediaProviderAdapter } from "@vidstack/react";
+import { DASHProviderLoader, HLSProviderLoader, VideoProviderLoader } from "@vidstack/react";
+
+type Loader = VideoProviderLoader | HLSProviderLoader | DASHProviderLoader;
+type LoaderConstructor<T extends Loader> = new () => T;
+
+declare global {
+  var typetypeVidstackProviderLoadersPatched: boolean | undefined;
+}
+
+function patchLoader<T extends Loader>(LoaderClass: LoaderConstructor<T>) {
+  const originalLoad = LoaderClass.prototype.load;
+  LoaderClass.prototype.load = function load(context: MediaContext): Promise<MediaProviderAdapter> {
+    const target = this.target;
+    if (!target) return originalLoad.call(this, context);
+    const stableLoader = new LoaderClass();
+    stableLoader.target = target;
+    return originalLoad.call(stableLoader, context);
+  };
+}
+
+export function patchVidstackProviderLoaders() {
+  if (globalThis.typetypeVidstackProviderLoadersPatched) return;
+  globalThis.typetypeVidstackProviderLoadersPatched = true;
+  patchLoader(VideoProviderLoader);
+  patchLoader(HLSProviderLoader);
+  patchLoader(DASHProviderLoader);
+}
diff --git a/apps/web/src/lib/watch-later-mappers.ts b/apps/web/src/lib/watch-later-mappers.ts
index a825564..5cb7919 100644
--- a/apps/web/src/lib/watch-later-mappers.ts
+++ b/apps/web/src/lib/watch-later-mappers.ts
@@ -3,16 +3,18 @@ import type { WatchLaterItem } from "../types/user";
 import { proxyImage } from "./proxy";
 
 export function mapWatchLaterItem(item: WatchLaterItem): VideoStream {
+  const rawChannelAvatar = item.channelAvatar ?? "";
   return {
     id: item.url,
     title: item.title,
     thumbnail: proxyImage(item.thumbnail),
     rawThumbnail: item.thumbnail,
-    rawChannelAvatar: "",
-    channelName: "",
-    channelAvatar: "",
-    views: 0,
+    rawChannelAvatar,
+    channelName: item.channelName ?? "",
+    channelUrl: item.channelUrl || undefined,
+    channelAvatar: proxyImage(rawChannelAvatar),
+    views: item.viewCount ?? 0,
     duration: item.duration,
-    publishedAt: item.addedAt > 0 ? item.addedAt : undefined,
+    publishedAt: item.publishedAt && item.publishedAt > 0 ? item.publishedAt : undefined,
   };
 }
diff --git a/apps/web/src/main.tsx b/apps/web/src/main.tsx
index 71e3f02..7f402f3 100644
--- a/apps/web/src/main.tsx
+++ b/apps/web/src/main.tsx
@@ -1,13 +1,14 @@
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { createRouter, RouterProvider } from "@tanstack/react-router";
-import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import "./index.css";
 import { PageSpinner } from "./components/page-spinner";
 import { ApiError } from "./lib/api";
+import { installConsoleWarningFilter } from "./lib/console-warning-filter";
 import { initErrorCapture } from "./lib/error-capture";
 import { routeTree } from "./routeTree.gen";
 
+installConsoleWarningFilter();
 initErrorCapture();
 
 const router = createRouter({
@@ -43,9 +44,7 @@ if (!root) {
 }
 
 createRoot(root).render(
-  <StrictMode>
-    <QueryClientProvider client={queryClient}>
-      <RouterProvider router={router} />
-    </QueryClientProvider>
-  </StrictMode>,
+  <QueryClientProvider client={queryClient}>
+    <RouterProvider router={router} />
+  </QueryClientProvider>,
 );
diff --git a/apps/web/src/routes/admin-console.tsx b/apps/web/src/routes/admin-console.tsx
index 0d69205..d10d795 100644
--- a/apps/web/src/routes/admin-console.tsx
+++ b/apps/web/src/routes/admin-console.tsx
@@ -62,7 +62,7 @@ function AdminConsolePage() {
   }
 
   return (
-    <div className="flex flex-col gap-5 pt-2 [animation:page-fade-in_0.2s_ease-out]">
+    <div className="flex min-w-0 flex-col gap-5 pt-2 [animation:page-fade-in_0.2s_ease-out]">
       <AdminConsoleNav
         items={sections.map((key) => ({
           key,
diff --git a/apps/web/src/routes/favorites.tsx b/apps/web/src/routes/favorites.tsx
index 63a696a..e83882b 100644
--- a/apps/web/src/routes/favorites.tsx
+++ b/apps/web/src/routes/favorites.tsx
@@ -1,27 +1,48 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, useNavigate } from "@tanstack/react-router";
 import { useMemo, useState } from "react";
+import { CollectionPageHeader } from "../components/collection-page-header";
 import { VideoGrid } from "../components/video-grid";
 import { VideoGridSkeleton } from "../components/video-grid-skeleton";
 import { useBlockedFilter } from "../hooks/use-blocked-filter";
 import { useFavoriteStreams } from "../hooks/use-favorite-streams";
+import { randomShuffleSeed, shuffleByKey } from "../lib/playlist-shuffle";
+import { toPublicWatchParam } from "../lib/watch-url";
 
 const FAVORITES_BATCH_SIZE = 12;
 
 function FavoritesPage() {
+  const navigate = useNavigate();
   const [limit, setLimit] = useState(FAVORITES_BATCH_SIZE);
   const { videos, count, requestedCount, isLoading } = useFavoriteStreams({ limit });
   const { filter } = useBlockedFilter();
   const visibleVideos = useMemo(() => filter(videos), [filter, videos]);
   const canLoadMore = requestedCount < count;
 
+  function playFrom(index: number, shuffle?: string) {
+    const video = visibleVideos[index];
+    if (!video) return;
+    navigate({
+      to: "/watch",
+      search: { v: toPublicWatchParam(video.id), ...(shuffle ? { shuffle } : {}) },
+    });
+  }
+
   return (
-    <div className="flex flex-col gap-6 [animation:page-fade-in_0.2s_ease-out]">
-      <header>
-        <h1 className="text-lg font-semibold text-fg">Favorites</h1>
-        <p className="text-xs text-fg-soft">
-          {isLoading ? "Loading videos" : `${count} video${count !== 1 ? "s" : ""}`}
-        </p>
-      </header>
+    <div className="flex flex-col gap-6 pt-2 sm:pt-4 [animation:page-fade-in_0.2s_ease-out]">
+      <CollectionPageHeader
+        title="Favorites"
+        count={count}
+        loading={isLoading}
+        canPlay={visibleVideos.length > 0}
+        onPlayAll={() => playFrom(0)}
+        onShuffle={() => {
+          const seed = randomShuffleSeed();
+          const shuffled = shuffleByKey(visibleVideos, seed);
+          const first = shuffled[0];
+          if (!first) return;
+          navigate({ to: "/watch", search: { v: toPublicWatchParam(first.id), shuffle: seed } });
+        }}
+      />
       {isLoading ? (
         <VideoGridSkeleton idPrefix="favorites" />
       ) : videos.length === 0 ? (
diff --git a/apps/web/src/routes/history.tsx b/apps/web/src/routes/history.tsx
index fb1907d..b4c1abc 100644
--- a/apps/web/src/routes/history.tsx
+++ b/apps/web/src/routes/history.tsx
@@ -1,11 +1,12 @@
 import { useQuery } from "@tanstack/react-query";
 import { createFileRoute } from "@tanstack/react-router";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { ConfirmModal } from "../components/confirm-modal";
 import { HistoryCard } from "../components/history-card";
 import type { FilterState } from "../components/history-filter";
 import { HistoryFilter } from "../components/history-filter";
 import { ScrollSentinel } from "../components/scroll-sentinel";
+import { Toast } from "../components/toast";
 import { useAuth } from "../hooks/use-auth";
 import { useHistory } from "../hooks/use-history";
 import { fetchHistory } from "../lib/api-user";
@@ -55,9 +56,17 @@ function HistoryPage() {
   const [searchQuery, setSearchQuery] = useState("");
   const [filter, setFilter] = useState<FilterState | null>(null);
   const [pendingRemoveItem, setPendingRemoveItem] = useState<HistoryItem | null>(null);
-  const { query, items, total, remove } = useHistory(searchQuery);
+  const [clearHistoryOpen, setClearHistoryOpen] = useState(false);
+  const [toast, setToast] = useState<string | null>(null);
+  const { query, items, total, remove, clear } = useHistory(searchQuery);
   const dateRange = rangeFromFilter(filter);
 
+  useEffect(() => {
+    if (!toast) return;
+    const timeout = window.setTimeout(() => setToast(null), 3000);
+    return () => window.clearTimeout(timeout);
+  }, [toast]);
+
   const allItemsQuery = useQuery({
     queryKey: ["history-filtered", searchQuery, dateRange?.from ?? null, dateRange?.to ?? null],
     queryFn: () =>
@@ -101,7 +110,25 @@ function HistoryPage() {
         filter={filter}
         onFilterChange={setFilter}
         resultCount={filteredTotal}
+        canClearHistory={total > 0}
+        onClearHistory={() => setClearHistoryOpen(true)}
       />
+      {clearHistoryOpen && (
+        <ConfirmModal
+          title="Clear watch history?"
+          description="This removes every video from your watch history."
+          confirmLabel="Clear all"
+          onConfirm={() => {
+            clear.mutate(undefined, {
+              onSuccess: () => setToast("Watch history cleared"),
+              onError: (error) =>
+                setToast(error instanceof Error ? error.message : "Failed to clear history"),
+            });
+            setClearHistoryOpen(false);
+          }}
+          onCancel={() => setClearHistoryOpen(false)}
+        />
+      )}
       {pendingRemoveItem !== null && (
         <ConfirmModal
           title="Remove from history?"
@@ -114,6 +141,7 @@ function HistoryPage() {
           onCancel={() => setPendingRemoveItem(null)}
         />
       )}
+      <Toast message={toast} />
     </div>
   );
 }
diff --git a/apps/web/src/routes/playlists.tsx b/apps/web/src/routes/playlists.tsx
index 2217090..2ffd9c2 100644
--- a/apps/web/src/routes/playlists.tsx
+++ b/apps/web/src/routes/playlists.tsx
@@ -73,7 +73,7 @@ function PlaylistsPage() {
   const hasLocalCollections = playlists.length > 0 || favorites.count > 0 || watchLater.count > 0;
 
   return (
-    <div className="flex flex-col gap-6 [animation:page-fade-in_0.2s_ease-out]">
+    <div className="flex flex-col gap-6 pt-2 sm:pt-4 [animation:page-fade-in_0.2s_ease-out]">
       <PlaylistsPageHeader
         selectionMode={selectionMode}
         selectedCount={selectedIds.size}
diff --git a/apps/web/src/routes/subscriptions.tsx b/apps/web/src/routes/subscriptions.tsx
index 50d0165..fc08fca 100644
--- a/apps/web/src/routes/subscriptions.tsx
+++ b/apps/web/src/routes/subscriptions.tsx
@@ -1,7 +1,8 @@
 import { useQueryClient } from "@tanstack/react-query";
 import { createFileRoute } from "@tanstack/react-router";
-import { useEffect, useMemo, useRef } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { ScrollSentinel } from "../components/scroll-sentinel";
+import { SubscriptionChannelList } from "../components/subscription-channel-list";
 import { VideoGrid } from "../components/video-grid";
 import { VideoGridSkeleton } from "../components/video-grid-skeleton";
 import { useBlockedFilter } from "../hooks/use-blocked-filter";
@@ -10,9 +11,18 @@ import { useSubscriptionFeed } from "../hooks/use-subscription-feed";
 import { useSubscriptions } from "../hooks/use-subscriptions";
 import { ApiError } from "../lib/api";
 
+type SubscriptionView = "videos" | "channels";
+
+function viewButtonClass(active: boolean): string {
+  return active
+    ? "bg-fg text-app"
+    : "border border-border bg-surface text-fg-muted hover:border-border-strong hover:text-fg";
+}
+
 function SubscriptionsPage() {
   const queryClient = useQueryClient();
   const prefetchedIdsRef = useRef(new Set<string>());
+  const [view, setView] = useState<SubscriptionView>("videos");
   const { query } = useSubscriptions();
   const subscriptions = query.data ?? [];
   const { streams, isLoading, isFetchingNextPage, hasNextPage, fetchNextPage } =
@@ -43,14 +53,47 @@ function SubscriptionsPage() {
     );
   }
 
-  if (isLoading) return <VideoGridSkeleton idPrefix="subscriptions" />;
-
   return (
-    <>
-      <VideoGrid streams={visible} />
-      {isFetchingNextPage && <VideoGridSkeleton idPrefix="subscriptions-next" />}
-      <ScrollSentinel onIntersect={fetchNextPage} enabled={hasNextPage && !isFetchingNextPage} />
-    </>
+    <div className="flex flex-col gap-5">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
+        <div>
+          <h1 className="text-lg font-semibold text-fg">Subscriptions</h1>
+          <p className="text-xs text-fg-soft">
+            {subscriptions.length} {subscriptions.length === 1 ? "channel" : "channels"}
+          </p>
+        </div>
+        <div className="grid grid-cols-2 gap-2 sm:flex">
+          <button
+            type="button"
+            onClick={() => setView("videos")}
+            className={`rounded-full px-4 py-2 text-sm transition-colors ${viewButtonClass(view === "videos")}`}
+          >
+            Videos
+          </button>
+          <button
+            type="button"
+            onClick={() => setView("channels")}
+            className={`rounded-full px-4 py-2 text-sm transition-colors ${viewButtonClass(view === "channels")}`}
+          >
+            Channels
+          </button>
+        </div>
+      </div>
+      {view === "channels" ? (
+        <SubscriptionChannelList subscriptions={subscriptions} />
+      ) : isLoading ? (
+        <VideoGridSkeleton idPrefix="subscriptions" />
+      ) : (
+        <>
+          <VideoGrid streams={visible} />
+          {isFetchingNextPage && <VideoGridSkeleton idPrefix="subscriptions-next" />}
+          <ScrollSentinel
+            onIntersect={fetchNextPage}
+            enabled={hasNextPage && !isFetchingNextPage}
+          />
+        </>
+      )}
+    </div>
   );
 }
 
diff --git a/apps/web/src/routes/watch-later.tsx b/apps/web/src/routes/watch-later.tsx
index 67007e8..ab4497d 100644
--- a/apps/web/src/routes/watch-later.tsx
+++ b/apps/web/src/routes/watch-later.tsx
@@ -1,23 +1,43 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, useNavigate } from "@tanstack/react-router";
 import { useMemo } from "react";
+import { CollectionPageHeader } from "../components/collection-page-header";
 import { VideoGrid } from "../components/video-grid";
 import { VideoGridSkeleton } from "../components/video-grid-skeleton";
 import { useBlockedFilter } from "../hooks/use-blocked-filter";
 import { useWatchLaterStreams } from "../hooks/use-watch-later-streams";
+import { randomShuffleSeed, shuffleByKey } from "../lib/playlist-shuffle";
+import { toPublicWatchParam } from "../lib/watch-url";
 
 function WatchLaterPage() {
+  const navigate = useNavigate();
   const { videos, count, isLoading } = useWatchLaterStreams();
   const { filter } = useBlockedFilter();
   const visibleVideos = useMemo(() => filter(videos), [filter, videos]);
 
+  function playVideo(id: string, shuffle?: string) {
+    navigate({
+      to: "/watch",
+      search: { v: toPublicWatchParam(id), ...(shuffle ? { shuffle } : {}) },
+    });
+  }
+
   return (
-    <div className="flex flex-col gap-6 [animation:page-fade-in_0.2s_ease-out]">
-      <header>
-        <h1 className="text-lg font-semibold text-fg">Watch later</h1>
-        <p className="text-xs text-fg-soft">
-          {isLoading ? "Loading videos" : `${count} video${count !== 1 ? "s" : ""}`}
-        </p>
-      </header>
+    <div className="flex flex-col gap-6 pt-2 sm:pt-4 [animation:page-fade-in_0.2s_ease-out]">
+      <CollectionPageHeader
+        title="Watch later"
+        count={count}
+        loading={isLoading}
+        canPlay={visibleVideos.length > 0}
+        onPlayAll={() => {
+          const first = visibleVideos[0];
+          if (first) playVideo(first.id);
+        }}
+        onShuffle={() => {
+          const seed = randomShuffleSeed();
+          const first = shuffleByKey(visibleVideos, seed)[0];
+          if (first) playVideo(first.id, seed);
+        }}
+      />
       {isLoading ? (
         <VideoGridSkeleton idPrefix="watch-later" />
       ) : videos.length === 0 ? (
diff --git a/apps/web/src/settings/settings-privacy.tsx b/apps/web/src/settings/settings-privacy.tsx
index 4860ce4..373ed8e 100644
--- a/apps/web/src/settings/settings-privacy.tsx
+++ b/apps/web/src/settings/settings-privacy.tsx
@@ -3,7 +3,9 @@ import { ConfirmModal } from "../components/confirm-modal";
 import { Toast } from "../components/toast";
 import { useHistory } from "../hooks/use-history";
 import { useSearchHistory } from "../hooks/use-search-history";
+import { useSettings } from "../hooks/use-settings";
 import { useSubscriptions } from "../hooks/use-subscriptions";
+import { ToggleSwitch } from "./settings-toggle-switch";
 
 const SECTION_LABEL = "text-xs font-medium text-fg-soft uppercase tracking-wider px-1";
 const CARD = "bg-surface rounded-xl border border-border overflow-hidden divide-y divide-border";
@@ -15,6 +17,7 @@ export function SettingsPrivacy() {
   const { total: historyTotal, clear: clearHistory } = useHistory();
   const { query: subsQuery, remove: removeSubscription } = useSubscriptions();
   const { total: searchHistoryTotal, clear: clearSearchHistory } = useSearchHistory();
+  const { settings, update } = useSettings();
   const subscriptions = subsQuery.data ?? [];
   const [modal, setModal] = useState<ActiveModal>(null);
   const [toast, setToast] = useState<string | null>(null);
@@ -26,21 +29,26 @@ export function SettingsPrivacy() {
   }, [toast]);
 
   async function handleConfirm() {
-    if (modal === "history") {
-      clearHistory.mutate();
-      setToast("Watch history cleared");
-    }
-    if (modal === "subscriptions") {
-      for (const sub of subsQuery.data ?? []) {
-        removeSubscription.mutate(sub.channelUrl);
+    const activeModal = modal;
+    setModal(null);
+    try {
+      if (activeModal === "history") {
+        await clearHistory.mutateAsync();
+        setToast("Watch history cleared");
       }
-      setToast("Unsubscribed from all channels");
-    }
-    if (modal === "search-history") {
-      clearSearchHistory.mutate();
-      setToast("Search history cleared");
+      if (activeModal === "subscriptions") {
+        for (const sub of subsQuery.data ?? []) {
+          removeSubscription.mutate(sub.channelUrl);
+        }
+        setToast("Unsubscribed from all channels");
+      }
+      if (activeModal === "search-history") {
+        await clearSearchHistory.mutateAsync();
+        setToast("Search history cleared");
+      }
+    } catch (error) {
+      setToast(error instanceof Error ? error.message : "Action failed");
     }
-    setModal(null);
   }
 
   const historyLabel = historyTotal === 1 ? "1 entry" : `${historyTotal} entries`;
@@ -60,6 +68,16 @@ export function SettingsPrivacy() {
     <section className="flex flex-col gap-3">
       <p className={SECTION_LABEL}>Privacy</p>
       <div className={CARD}>
+        <div className={ROW}>
+          <div className="flex flex-col gap-1">
+            <span className="text-sm text-fg">Watch history tracking</span>
+            <span className="text-xs text-fg-soft">Save watched videos and playback progress</span>
+          </div>
+          <ToggleSwitch
+            checked={!settings.disableWatchHistory}
+            onClick={() => update.mutate({ disableWatchHistory: !settings.disableWatchHistory })}
+          />
+        </div>
         <div className={ROW}>
           <div className="flex flex-col gap-1">
             <span className="text-sm text-fg">Watch history</span>
diff --git a/apps/web/src/types/allow-list.ts b/apps/web/src/types/allow-list.ts
index a605640..8db0489 100644
--- a/apps/web/src/types/allow-list.ts
+++ b/apps/web/src/types/allow-list.ts
@@ -5,6 +5,15 @@ export type AdminAllowListUser = {
   email: string;
   name: string;
   accessMode: AccessMode;
+  adminManagedAccessMode?: boolean;
+  avatarUrl?: string | null;
+  avatarType?: "custom" | "emoji" | null;
+  avatarCode?: string | null;
+};
+
+export type AdminManagedAccessUsersPage = {
+  items: AdminAllowListUser[];
+  nextpage: string | null;
 };
 
 export type AllowedPlaylistItem = {
diff --git a/apps/web/src/types/user.ts b/apps/web/src/types/user.ts
index f9a76f5..6361ec1 100644
--- a/apps/web/src/types/user.ts
+++ b/apps/web/src/types/user.ts
@@ -54,6 +54,14 @@ export type PlaylistItem = {
 export type FavoriteItem = {
   videoUrl: string;
   favoritedAt: number;
+  title?: string;
+  thumbnail?: string;
+  duration?: number;
+  channelName?: string;
+  channelUrl?: string;
+  channelAvatar?: string;
+  viewCount?: number;
+  publishedAt?: number;
 };
 
 export type WatchLaterItem = {
@@ -62,6 +70,11 @@ export type WatchLaterItem = {
   thumbnail: string;
   duration: number;
   addedAt: number;
+  channelName?: string;
+  channelUrl?: string;
+  channelAvatar?: string;
+  viewCount?: number;
+  publishedAt?: number;
 };
 
 export type ProgressItem = {
@@ -103,6 +116,7 @@ export type SettingsItem = {
   sponsorBlockManualSkipOnFullVideo: boolean;
   sponsorBlockSkipNonMusicOnlyOnMusicVideos: boolean;
   sponsorBlockMuteInsteadOfSkip: boolean;
+  disableWatchHistory: boolean;
   hideContinueWatching: boolean;
   hideHomeRecommendations: boolean;
   hideRelatedVideos: boolean;