diff --git a/.env.example b/.env.example
index c7ac4dd..a541f34 100644
--- a/.env.example
+++ b/.env.example
@@ -8,9 +8,9 @@ HOST_PORT_SERVER_BETA=18080
 HOST_PORT_DOWNLOADER_BETA=19093
 HOST_PORT_TOKEN_BETA=18081
 HOST_PORT_GARAGE_S3_BETA=3900
-DATABASE_URL=jdbc:postgresql://postgres:5432/typetype
-DATABASE_USER=typetype
-DATABASE_PASSWORD=typetype
+POSTGRES_DB=typetype
+POSTGRES_USER=typetype
+POSTGRES_PASSWORD=typetype
 DRAGONFLY_URL=redis://dragonfly:6379
 GITHUB_REPO=Priveetee/TypeType-Server
 GITHUB_ISSUE_TEMPLATE=bug_report_backend.md
diff --git a/apps/web/src/components/channel-avatar.tsx b/apps/web/src/components/channel-avatar.tsx
index c63b18f..32072b2 100644
--- a/apps/web/src/components/channel-avatar.tsx
+++ b/apps/web/src/components/channel-avatar.tsx
@@ -21,16 +21,16 @@ function getInitial(name: string): string {
 }
 
 export function ChannelAvatar({ src, name, className = "w-8 h-8" }: Props) {
-  const [failed, setFailed] = useState(false);
+  const [failedSrc, setFailedSrc] = useState<string | null>(null);
+  const failed = failedSrc === src;
 
   if (!src || failed) {
     return (
       <div
-        className={`${className} rounded-full flex-shrink-0 bg-surface-soft flex items-center justify-center text-fg-muted font-medium select-none`}
-        style={{ fontSize: "40%" }}
+        className={`${className} flex flex-shrink-0 select-none items-center justify-center rounded-full border border-border bg-gradient-to-br from-surface-strong to-surface-soft font-semibold text-fg-muted`}
         title={name}
       >
-        {getInitial(name)}
+        <span className="text-base leading-none">{getInitial(name)}</span>
       </div>
     );
   }
@@ -38,11 +38,13 @@ export function ChannelAvatar({ src, name, className = "w-8 h-8" }: Props) {
   return (
     <img
       src={src}
-      alt={name}
-      className={`${className} rounded-full flex-shrink-0`}
+      alt=""
+      aria-hidden="true"
+      className={`${className} flex-shrink-0 rounded-full object-cover`}
       loading="lazy"
       decoding="async"
-      onError={() => setFailed(true)}
+      onError={() => setFailedSrc(src)}
+      title={name}
     />
   );
 }
diff --git a/apps/web/src/components/history-card.tsx b/apps/web/src/components/history-card.tsx
index 4eef8ac..e092cc8 100644
--- a/apps/web/src/components/history-card.tsx
+++ b/apps/web/src/components/history-card.tsx
@@ -50,21 +50,21 @@ export function HistoryCard({ item, onRemove, index }: HistoryCardProps) {
 
   return (
     <div
-      className="flex flex-col gap-2 group relative animate-card-pop-in"
+      className="group relative grid animate-card-pop-in grid-cols-[8.75rem_minmax(0,1fr)] gap-3 rounded-2xl border border-border bg-surface/45 p-2.5 sm:flex sm:flex-col sm:gap-2 sm:border-0 sm:bg-transparent sm:p-0"
       style={{ animationDelay: `${delay}ms` }}
     >
       <Link
         to="/watch"
         search={watchRouteSearch(item.url)}
-        className="block"
+        className="block min-w-0 sm:w-full"
         onMouseEnter={prefetch.onMouseEnter}
         onMouseLeave={prefetch.onMouseLeave}
       >
-        <div className="relative aspect-video rounded-lg overflow-hidden bg-surface-strong">
+        <div className="relative aspect-video overflow-hidden rounded-xl bg-surface-strong sm:rounded-lg">
           <img
             src={proxyImage(item.thumbnail)}
             alt={item.title}
-            className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200"
+            className="h-full w-full object-cover transition-transform duration-200 group-hover:scale-105"
             loading="lazy"
             decoding="async"
           />
@@ -93,34 +93,41 @@ export function HistoryCard({ item, onRemove, index }: HistoryCardProps) {
           </button>
         </div>
       </Link>
-      <div className="flex gap-2">
+      <div className="flex min-w-0 gap-2 py-0.5 sm:flex-none sm:py-0">
         {item.channelUrl ? (
-          <ChannelRouteLink url={item.channelUrl} className="flex-shrink-0 mt-0.5">
-            <HistoryChannelAvatar item={item} className="w-7 h-7" />
+          <ChannelRouteLink url={item.channelUrl} className="mt-0.5 hidden flex-shrink-0 sm:block">
+            <HistoryChannelAvatar item={item} className="h-7 w-7" />
           </ChannelRouteLink>
         ) : (
-          <HistoryChannelAvatar item={item} className="w-7 h-7" />
+          <span className="mt-0.5 hidden flex-shrink-0 sm:block">
+            <HistoryChannelAvatar item={item} className="h-7 w-7" />
+          </span>
         )}
-        <div className="flex flex-col gap-0.5 min-w-0">
+        <div className="flex min-w-0 flex-col gap-1.5 sm:gap-0.5">
           <Link
             to="/watch"
             search={watchRouteSearch(item.url)}
             onMouseEnter={prefetch.onMouseEnter}
             onMouseLeave={prefetch.onMouseLeave}
+            className="min-w-0"
           >
-            <p className="text-sm font-medium text-fg line-clamp-2 leading-snug">{item.title}</p>
+            <p className="line-clamp-2 text-sm font-semibold leading-snug text-fg sm:font-medium">
+              {item.title}
+            </p>
           </Link>
           {item.channelUrl ? (
             <ChannelRouteLink
               url={item.channelUrl}
-              className="text-xs text-fg-muted hover:text-fg transition-colors w-fit"
+              className="w-fit max-w-full truncate text-xs text-fg-muted transition-colors hover:text-fg"
             >
               {item.channelName}
             </ChannelRouteLink>
           ) : (
-            <p className="text-xs text-fg-muted">{item.channelName}</p>
+            <p className="truncate text-xs text-fg-muted">{item.channelName}</p>
           )}
-          <p className="text-[11px] text-fg-soft">Watched {formatWatchedAt(item.watchedAt)}</p>
+          <p className="line-clamp-1 text-[11px] text-fg-soft sm:mt-0">
+            Watched {formatWatchedAt(item.watchedAt)}
+          </p>
         </div>
       </div>
     </div>
diff --git a/apps/web/src/components/history-filter.tsx b/apps/web/src/components/history-filter.tsx
index 4664dfb..6109c59 100644
--- a/apps/web/src/components/history-filter.tsx
+++ b/apps/web/src/components/history-filter.tsx
@@ -91,7 +91,7 @@ export function HistoryFilter({
   };
 
   return (
-    <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">
+    <aside className="order-first flex w-full flex-shrink-0 flex-col gap-4 rounded-2xl border border-border bg-surface/40 p-3 lg:order-none lg:sticky lg:top-20 lg:w-52 lg:self-start lg:gap-5 lg:border-0 lg:bg-transparent lg:p-0">
       <div>
         <div className="mb-2.5 flex items-center justify-between gap-3">
           <p className="text-[11px] text-fg-soft uppercase tracking-wider">
@@ -101,7 +101,7 @@ export function HistoryFilter({
             <button
               type="button"
               onClick={onClearHistory}
-              className="text-[11px] text-danger transition-colors hover:text-danger-strong"
+              className="rounded-full border border-danger/40 px-2.5 py-1 text-[11px] text-danger transition-colors hover:border-danger hover:text-danger-strong"
             >
               Clear all
             </button>
@@ -123,13 +123,13 @@ export function HistoryFilter({
 
       <div>
         <p className="text-[11px] text-fg-soft uppercase tracking-wider mb-2">Date</p>
-        <div className="grid grid-cols-2 gap-1 lg:flex lg:flex-col lg:gap-0.5">
+        <div className="grid grid-cols-2 gap-1 sm:grid-cols-4 lg:flex lg:flex-col lg:gap-0.5">
           {PRESET_OPTIONS.map((opt) => (
             <button
               key={opt.value}
               type="button"
               onClick={() => handlePreset(opt.value)}
-              className={`h-8 px-2.5 rounded-lg text-xs text-left transition-colors ${
+              className={`h-8 rounded-lg px-2.5 text-left text-xs transition-colors sm:text-center lg:text-left ${
                 isPresetActive(opt.value)
                   ? "bg-fg text-app font-medium"
                   : "text-fg-muted hover:text-fg hover:bg-surface-strong"
@@ -142,7 +142,7 @@ export function HistoryFilter({
           <button
             type="button"
             onClick={handleOlderToggle}
-            className={`col-span-2 h-8 px-2.5 rounded-lg text-xs text-left transition-colors ${
+            className={`h-8 rounded-lg px-2.5 text-left text-xs transition-colors sm:text-center lg:text-left ${
               olderActive
                 ? "bg-fg text-app font-medium"
                 : "text-fg-muted hover:text-fg hover:bg-surface-strong"
diff --git a/apps/web/src/components/media-session-sync.tsx b/apps/web/src/components/media-session-sync.tsx
index 009ad9c..e3489d4 100644
--- a/apps/web/src/components/media-session-sync.tsx
+++ b/apps/web/src/components/media-session-sync.tsx
@@ -35,9 +35,6 @@ export function MediaSessionSync({
   const paused = useMediaState("paused");
   const currentTimeRef = useRef(0);
   const durationRef = useRef(0);
-  const pausedRef = useRef(true);
-
-  pausedRef.current = paused;
 
   useEffect(() => {
     if (typeof navigator === "undefined" || !("mediaSession" in navigator)) return;
@@ -99,29 +96,6 @@ export function MediaSessionSync({
     };
   }, [canSeek, isLive, onPreviousTrack, onNextTrack, remote]);
 
-  useEffect(() => {
-    if (typeof navigator === "undefined" || !("mediaSession" in navigator)) return;
-    const onVisibilityChange = () => {
-      if (document.visibilityState !== "visible") return;
-      if (!pausedRef.current) {
-        void Promise.resolve(remote.play()).catch(() => {});
-      }
-    };
-    const onFocus = () => {
-      if (!pausedRef.current) {
-        void Promise.resolve(remote.play()).catch(() => {});
-      }
-    };
-    document.addEventListener("visibilitychange", onVisibilityChange);
-    window.addEventListener("pageshow", onFocus);
-    window.addEventListener("focus", onFocus);
-    return () => {
-      document.removeEventListener("visibilitychange", onVisibilityChange);
-      window.removeEventListener("pageshow", onFocus);
-      window.removeEventListener("focus", onFocus);
-    };
-  }, [remote]);
-
   useEffect(() => {
     if (typeof navigator === "undefined" || !("mediaSession" in navigator)) return;
     navigator.mediaSession.playbackState = paused ? "paused" : "playing";
diff --git a/apps/web/src/components/playback-return-guard.tsx b/apps/web/src/components/playback-return-guard.tsx
new file mode 100644
index 0000000..b8d50f2
--- /dev/null
+++ b/apps/web/src/components/playback-return-guard.tsx
@@ -0,0 +1,66 @@
+import { useEffect, useRef } from "react";
+import { useMediaPlayer, useMediaRemote } from "../lib/vidstack";
+
+export function PlaybackReturnGuard() {
+  const player = useMediaPlayer();
+  const remote = useMediaRemote();
+  const savedTimeRef = useRef(0);
+  const wasPlayingRef = useRef(false);
+  const restoreTokenRef = useRef(0);
+
+  useEffect(() => {
+    const root = player?.el;
+    if (!root) return;
+    const rootElement = root;
+
+    function media() {
+      return rootElement.querySelector<HTMLMediaElement>("video,audio");
+    }
+
+    function remember() {
+      const current = media();
+      if (!current) return;
+      const currentTime = Number.isFinite(current.currentTime) ? current.currentTime : 0;
+      const duration = Number.isFinite(current.duration) ? current.duration : 0;
+      if (currentTime < 5 || (duration > 0 && currentTime >= duration * 0.95)) return;
+      savedTimeRef.current = currentTime;
+      wasPlayingRef.current = !current.paused && !current.ended;
+      restoreTokenRef.current += 1;
+    }
+
+    function restore() {
+      const token = restoreTokenRef.current;
+      window.setTimeout(() => {
+        if (token !== restoreTokenRef.current) return;
+        const current = media();
+        const savedTime = savedTimeRef.current;
+        if (!current || savedTime < 5) return;
+        const currentTime = Number.isFinite(current.currentTime) ? current.currentTime : 0;
+        const duration = Number.isFinite(current.duration) ? current.duration : 0;
+        if (duration > 0 && savedTime >= duration * 0.95) return;
+        if (currentTime < savedTime - 3) remote.seek(savedTime);
+        if (wasPlayingRef.current && current.paused && !current.ended) {
+          void Promise.resolve(remote.play()).catch(() => {});
+        }
+      }, 250);
+    }
+
+    function onVisibilityChange() {
+      if (document.visibilityState === "hidden") remember();
+      if (document.visibilityState === "visible") restore();
+    }
+
+    document.addEventListener("visibilitychange", onVisibilityChange);
+    window.addEventListener("pagehide", remember);
+    window.addEventListener("pageshow", restore);
+    window.addEventListener("focus", restore);
+    return () => {
+      document.removeEventListener("visibilitychange", onVisibilityChange);
+      window.removeEventListener("pagehide", remember);
+      window.removeEventListener("pageshow", restore);
+      window.removeEventListener("focus", restore);
+    };
+  }, [player, remote]);
+
+  return null;
+}
diff --git a/apps/web/src/components/subscription-channel-list.tsx b/apps/web/src/components/subscription-channel-list.tsx
index d13c333..7b5f811 100644
--- a/apps/web/src/components/subscription-channel-list.tsx
+++ b/apps/web/src/components/subscription-channel-list.tsx
@@ -1,40 +1,64 @@
-import { formatExactDate } from "../lib/format";
+import { startTransition, useMemo, useState } from "react";
 import { proxyImage } from "../lib/proxy";
 import type { SubscriptionItem } from "../types/user";
 import { ChannelAvatar } from "./channel-avatar";
 import { ChannelRouteLink } from "./channel-route-link";
+import { ScrollSentinel } from "./scroll-sentinel";
 
-type Props = {
-  subscriptions: SubscriptionItem[];
-};
+type Props = { subscriptions: SubscriptionItem[] };
 
-function subscribedLabel(timestamp: number): string {
-  const date = formatExactDate(timestamp);
-  return date ? `Subscribed ${date}` : "Subscribed";
-}
+const CHANNEL_BATCH_SIZE = 25;
 
 export function SubscriptionChannelList({ subscriptions }: Props) {
-  const sorted = [...subscriptions].sort((a, b) => a.name.localeCompare(b.name));
+  const [visibleCount, setVisibleCount] = useState(CHANNEL_BATCH_SIZE);
+  const sorted = useMemo(
+    () => [...subscriptions].sort((a, b) => a.name.localeCompare(b.name)),
+    [subscriptions],
+  );
+  const visible = sorted.slice(0, Math.min(visibleCount, sorted.length));
+  const hasMore = visibleCount < sorted.length;
+
+  function loadMore() {
+    startTransition(() => {
+      setVisibleCount((count) => Math.min(count + CHANNEL_BATCH_SIZE, sorted.length));
+    });
+  }
 
   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>
+    <>
+      <section className="grid grid-cols-3 gap-x-3 gap-y-6 sm:grid-cols-4 lg:grid-cols-5">
+        {visible.map((item, index) => (
+          <div
+            key={item.channelUrl}
+            className="animate-card-pop-in"
+            style={{ animationDelay: `${Math.min((index % CHANNEL_BATCH_SIZE) * 16, 160)}ms` }}
+          >
+            <ChannelRouteLink
+              url={item.channelUrl}
+              className="group flex min-w-0 flex-col items-center gap-2 rounded-2xl px-1.5 py-2 text-center transition-colors hover:bg-surface/55"
+            >
+              <span className="rounded-full p-1 transition-colors group-hover:bg-surface-strong/70">
+                <ChannelAvatar
+                  src={proxyImage(item.avatarUrl)}
+                  name={item.name}
+                  className="h-16 w-16 sm:h-[4.5rem] sm:w-[4.5rem]"
+                />
+              </span>
+              <span className="flex min-w-0 flex-col items-center">
+                <span className="line-clamp-2 text-sm font-medium leading-snug text-fg group-hover:text-fg-strong">
+                  {item.name}
+                </span>
+              </span>
+            </ChannelRouteLink>
+          </div>
+        ))}
+      </section>
+      {hasMore && (
+        <div className="pt-2 text-center text-[11px] text-fg-soft">
+          Showing {visible.length} of {sorted.length} channels
+        </div>
+      )}
+      <ScrollSentinel enabled={hasMore} onIntersect={loadMore} />
+    </>
   );
 }
diff --git a/apps/web/src/components/subscriptions-header.tsx b/apps/web/src/components/subscriptions-header.tsx
new file mode 100644
index 0000000..ae1fb00
--- /dev/null
+++ b/apps/web/src/components/subscriptions-header.tsx
@@ -0,0 +1,50 @@
+import { Link } from "@tanstack/react-router";
+
+type Props = {
+  active: "videos" | "channels";
+  count: number;
+  onVideosIntent?: () => void;
+  onChannelsIntent?: () => void;
+};
+
+function linkClass(active: boolean): string {
+  return active
+    ? "border-fg text-fg"
+    : "border-transparent text-fg-muted hover:border-border-strong hover:text-fg";
+}
+
+export function SubscriptionsHeader({ active, count, onVideosIntent, onChannelsIntent }: Props) {
+  return (
+    <header className="flex flex-col gap-5 border-border border-b pt-3 pb-5 sm:flex-row sm:items-end sm:justify-between sm:pt-4">
+      <div className="min-w-0">
+        <p className="text-[11px] text-fg-soft uppercase tracking-[0.22em]">Library</p>
+        <h1 className="mt-1 text-2xl font-semibold tracking-tight text-fg">Subscriptions</h1>
+        <p className="mt-1 text-sm text-fg-muted">
+          {count} {count === 1 ? "channel" : "channels"} followed
+        </p>
+      </div>
+      <nav className="flex gap-6" aria-label="Subscription views">
+        <Link
+          to="/subscriptions"
+          preload="intent"
+          onFocus={onVideosIntent}
+          onMouseEnter={onVideosIntent}
+          onTouchStart={onVideosIntent}
+          className={`border-b pb-1.5 text-sm font-medium transition-colors ${linkClass(active === "videos")}`}
+        >
+          Videos
+        </Link>
+        <Link
+          to="/subscriptions/channels"
+          preload="intent"
+          onFocus={onChannelsIntent}
+          onMouseEnter={onChannelsIntent}
+          onTouchStart={onChannelsIntent}
+          className={`border-b pb-1.5 text-sm font-medium transition-colors ${linkClass(active === "channels")}`}
+        >
+          Channels
+        </Link>
+      </nav>
+    </header>
+  );
+}
diff --git a/apps/web/src/components/video-player.tsx b/apps/web/src/components/video-player.tsx
index 4c05381..c0bb7da 100644
--- a/apps/web/src/components/video-player.tsx
+++ b/apps/web/src/components/video-player.tsx
@@ -4,6 +4,7 @@ import { patchVidstackProviderLoaders } from "../lib/vidstack-provider-loader-pa
 import { CaptionStyleRestorer } from "./caption-style-restorer";
 import { MediaProgressEvents } from "./media-progress-events";
 import { MediaSessionSync } from "./media-session-sync";
+import { PlaybackReturnGuard } from "./playback-return-guard";
 import { PlayerHotkeys } from "./player-hotkeys";
 import { PlayerSeeker, SeekBridge, SponsorBlockSkipper } from "./player-internals";
 import { PlayerPlayPauseIndicator } from "./player-play-pause-indicator";
@@ -108,6 +109,7 @@ export function VideoPlayer({
         onNextVideo={onNextVideo}
       />
       <PlayerSeeker startTime={startTime} />
+      <PlaybackReturnGuard />
       <VolumeRestorer
         initialVolume={initialVolume}
         initialMuted={initialMuted}
diff --git a/apps/web/src/components/volume-restorer.tsx b/apps/web/src/components/volume-restorer.tsx
index 60076a9..0c04354 100644
--- a/apps/web/src/components/volume-restorer.tsx
+++ b/apps/web/src/components/volume-restorer.tsx
@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useRef } from "react";
-import { useMediaRemote, useMediaState } from "../lib/vidstack";
+import { useMediaPlayer, useMediaRemote, useMediaState } from "../lib/vidstack";
 
 type Props = {
   initialVolume: number;
@@ -17,6 +17,7 @@ export function VolumeRestorer({
   onVolumeChange,
 }: Props) {
   const remote = useMediaRemote();
+  const player = useMediaPlayer();
   const volume = useMediaState("volume");
   const muted = useMediaState("muted");
   const canPlay = useMediaState("canPlay");
@@ -37,8 +38,10 @@ export function VolumeRestorer({
 
   const attemptPlay = useCallback(async () => {
     if (!mountedRef.current) return;
+    const media = player?.el?.querySelector<HTMLMediaElement>("video,audio");
+    if (media && !media.paused && !media.ended) return;
     await remote.play();
-  }, [remote]);
+  }, [player, remote]);
 
   const tryPlay = useCallback(
     (force: boolean) => {
diff --git a/apps/web/src/hooks/use-subscription-feed.ts b/apps/web/src/hooks/use-subscription-feed.ts
index fa94368..9c7d288 100644
--- a/apps/web/src/hooks/use-subscription-feed.ts
+++ b/apps/web/src/hooks/use-subscription-feed.ts
@@ -7,6 +7,8 @@ import type { VideoStream } from "../types/stream";
 import { useAuth } from "./use-auth";
 import { useSubscriptions } from "./use-subscriptions";
 
+export const SUBSCRIPTION_FEED_KEY = ["subscription-feed"];
+
 type Result = {
   streams: VideoStream[];
   isLoading: boolean;
@@ -24,7 +26,7 @@ export function useSubscriptionFeed(): Result {
   );
 
   const query = useInfiniteQuery({
-    queryKey: ["subscription-feed"],
+    queryKey: SUBSCRIPTION_FEED_KEY,
     queryFn: ({ pageParam }) => fetchSubscriptionFeed(pageParam as number),
     initialPageParam: 0,
     getNextPageParam: (last, pages) => (last.nextpage !== null ? pages.length : undefined),
diff --git a/apps/web/src/hooks/use-subscriptions.ts b/apps/web/src/hooks/use-subscriptions.ts
index c750d39..08a9b5c 100644
--- a/apps/web/src/hooks/use-subscriptions.ts
+++ b/apps/web/src/hooks/use-subscriptions.ts
@@ -4,7 +4,7 @@ import { normalizeChannelUrl } from "../lib/channel-url";
 import type { SubscriptionItem } from "../types/user";
 import { useAuth } from "./use-auth";
 
-const KEY = ["subscriptions"];
+export const SUBSCRIPTIONS_KEY = ["subscriptions"];
 
 function hasSubscription(data: SubscriptionItem[] | undefined, channelUrl: string): boolean {
   const target = normalizeChannelUrl(channelUrl);
@@ -28,7 +28,7 @@ export function useSubscriptions() {
   const { authReady, isAuthed } = useAuth();
 
   const query = useQuery({
-    queryKey: KEY,
+    queryKey: SUBSCRIPTIONS_KEY,
     queryFn: fetchSubscriptions,
     enabled: authReady && isAuthed,
     select: dedupeSubscriptions,
@@ -44,12 +44,12 @@ export function useSubscriptions() {
         channelUrl: normalizeChannelUrl(item.channelUrl),
       });
     },
-    onSuccess: () => qc.invalidateQueries({ queryKey: KEY }),
+    onSuccess: () => qc.invalidateQueries({ queryKey: SUBSCRIPTIONS_KEY }),
   });
 
   const remove = useMutation({
     mutationFn: (channelUrl: string) => (isAuthed ? unsubscribe(channelUrl) : Promise.resolve()),
-    onSuccess: () => qc.invalidateQueries({ queryKey: KEY }),
+    onSuccess: () => qc.invalidateQueries({ queryKey: SUBSCRIPTIONS_KEY }),
   });
 
   function isSubscribed(channelUrl: string): boolean {
diff --git a/apps/web/src/lib/proxy.ts b/apps/web/src/lib/proxy.ts
index e814f29..c17ace8 100644
--- a/apps/web/src/lib/proxy.ts
+++ b/apps/web/src/lib/proxy.ts
@@ -35,7 +35,12 @@ function needsProxy(url: string): boolean {
     const parsed = new URL(url);
     if (parsed.protocol !== "http:" && parsed.protocol !== "https:") return false;
     const host = parsed.hostname;
-    return host.endsWith("hdslb.com") || host.endsWith("ytimg.com");
+    return (
+      host.endsWith("ggpht.com") ||
+      host.endsWith("googleusercontent.com") ||
+      host.endsWith("hdslb.com") ||
+      host.endsWith("ytimg.com")
+    );
   } catch {
     return false;
   }
diff --git a/apps/web/src/routeTree.gen.ts b/apps/web/src/routeTree.gen.ts
index e8dc096..219527c 100644
--- a/apps/web/src/routeTree.gen.ts
+++ b/apps/web/src/routeTree.gen.ts
@@ -32,6 +32,7 @@ import { Route as ChannelRouteImport } from './routes/channel'
 import { Route as AdminConsoleRouteImport } from './routes/admin-console'
 import { Route as IndexRouteImport } from './routes/index'
 import { Route as ImportIndexRouteImport } from './routes/import/index'
+import { Route as SubscriptionsChannelsRouteImport } from './routes/subscriptions_.channels'
 import { Route as PlaylistsIdRouteImport } from './routes/playlists_.$id'
 import { Route as ImportYoutubeRouteImport } from './routes/import/youtube'
 import { Route as ImportPipepipeRouteImport } from './routes/import/pipepipe'
@@ -153,6 +154,11 @@ const ImportIndexRoute = ImportIndexRouteImport.update({
   path: '/',
   getParentRoute: () => ImportRoute,
 } as any)
+const SubscriptionsChannelsRoute = SubscriptionsChannelsRouteImport.update({
+  id: '/subscriptions_/channels',
+  path: '/subscriptions/channels',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const PlaylistsIdRoute = PlaylistsIdRouteImport.update({
   id: '/playlists_/$id',
   path: '/playlists/$id',
@@ -206,6 +212,7 @@ export interface FileRoutesByFullPath {
   '/import/pipepipe': typeof ImportPipepipeRoute
   '/import/youtube': typeof ImportYoutubeRoute
   '/playlists/$id': typeof PlaylistsIdRoute
+  '/subscriptions/channels': typeof SubscriptionsChannelsRoute
   '/import/': typeof ImportIndexRoute
   '/auth/oidc/callback': typeof AuthOidcCallbackRoute
 }
@@ -235,6 +242,7 @@ export interface FileRoutesByTo {
   '/import/pipepipe': typeof ImportPipepipeRoute
   '/import/youtube': typeof ImportYoutubeRoute
   '/playlists/$id': typeof PlaylistsIdRoute
+  '/subscriptions/channels': typeof SubscriptionsChannelsRoute
   '/import': typeof ImportIndexRoute
   '/auth/oidc/callback': typeof AuthOidcCallbackRoute
 }
@@ -266,6 +274,7 @@ export interface FileRoutesById {
   '/import/pipepipe': typeof ImportPipepipeRoute
   '/import/youtube': typeof ImportYoutubeRoute
   '/playlists_/$id': typeof PlaylistsIdRoute
+  '/subscriptions_/channels': typeof SubscriptionsChannelsRoute
   '/import/': typeof ImportIndexRoute
   '/auth/oidc/callback': typeof AuthOidcCallbackRoute
 }
@@ -298,6 +307,7 @@ export interface FileRouteTypes {
     | '/import/pipepipe'
     | '/import/youtube'
     | '/playlists/$id'
+    | '/subscriptions/channels'
     | '/import/'
     | '/auth/oidc/callback'
   fileRoutesByTo: FileRoutesByTo
@@ -327,6 +337,7 @@ export interface FileRouteTypes {
     | '/import/pipepipe'
     | '/import/youtube'
     | '/playlists/$id'
+    | '/subscriptions/channels'
     | '/import'
     | '/auth/oidc/callback'
   id:
@@ -357,6 +368,7 @@ export interface FileRouteTypes {
     | '/import/pipepipe'
     | '/import/youtube'
     | '/playlists_/$id'
+    | '/subscriptions_/channels'
     | '/import/'
     | '/auth/oidc/callback'
   fileRoutesById: FileRoutesById
@@ -386,6 +398,7 @@ export interface RootRouteChildren {
   YoutubeSessionRoute: typeof YoutubeSessionRoute
   ChannelChannelIdRoute: typeof ChannelChannelIdRoute
   PlaylistsIdRoute: typeof PlaylistsIdRoute
+  SubscriptionsChannelsRoute: typeof SubscriptionsChannelsRoute
   AuthOidcCallbackRoute: typeof AuthOidcCallbackRoute
 }
 
@@ -552,6 +565,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof ImportIndexRouteImport
       parentRoute: typeof ImportRoute
     }
+    '/subscriptions_/channels': {
+      id: '/subscriptions_/channels'
+      path: '/subscriptions/channels'
+      fullPath: '/subscriptions/channels'
+      preLoaderRoute: typeof SubscriptionsChannelsRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/playlists_/$id': {
       id: '/playlists_/$id'
       path: '/playlists/$id'
@@ -630,6 +650,7 @@ const rootRouteChildren: RootRouteChildren = {
   YoutubeSessionRoute: YoutubeSessionRoute,
   ChannelChannelIdRoute: ChannelChannelIdRoute,
   PlaylistsIdRoute: PlaylistsIdRoute,
+  SubscriptionsChannelsRoute: SubscriptionsChannelsRoute,
   AuthOidcCallbackRoute: AuthOidcCallbackRoute,
 }
 export const routeTree = rootRouteImport
diff --git a/apps/web/src/routes/history.tsx b/apps/web/src/routes/history.tsx
index b4c1abc..d40b834 100644
--- a/apps/web/src/routes/history.tsx
+++ b/apps/web/src/routes/history.tsx
@@ -87,7 +87,7 @@ function HistoryPage() {
   return (
     <div className="flex flex-col gap-6 lg:flex-row lg:items-start lg:gap-8">
       <div className="flex-1 min-w-0">
-        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-x-3 sm:gap-x-4 gap-y-6 sm:gap-y-8">
+        <div className="grid grid-cols-1 gap-x-3 gap-y-2 sm:grid-cols-2 sm:gap-x-4 sm:gap-y-8 md:grid-cols-3 lg:grid-cols-4">
           {filtered.map((item: HistoryItem, index: number) => (
             <HistoryCard
               key={item.id}
diff --git a/apps/web/src/routes/settings.tsx b/apps/web/src/routes/settings.tsx
index 7236071..386e248 100644
--- a/apps/web/src/routes/settings.tsx
+++ b/apps/web/src/routes/settings.tsx
@@ -25,7 +25,7 @@ type Item = {
 const BASE_ITEMS: Item[] = [
   { key: "playback", label: "Playback" },
   { key: "video", label: "Video" },
-  { key: "home", label: "Home" },
+  { key: "home", label: "Interface" },
   { key: "service", label: "Service" },
   { key: "import", label: "Import" },
   { key: "privacy", label: "Privacy" },
diff --git a/apps/web/src/routes/subscriptions.tsx b/apps/web/src/routes/subscriptions.tsx
index fc08fca..81cf2dc 100644
--- a/apps/web/src/routes/subscriptions.tsx
+++ b/apps/web/src/routes/subscriptions.tsx
@@ -1,28 +1,29 @@
 import { useQueryClient } from "@tanstack/react-query";
 import { createFileRoute } from "@tanstack/react-router";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useMemo, useRef } from "react";
 import { ScrollSentinel } from "../components/scroll-sentinel";
-import { SubscriptionChannelList } from "../components/subscription-channel-list";
+import { SubscriptionsHeader } from "../components/subscriptions-header";
 import { VideoGrid } from "../components/video-grid";
 import { VideoGridSkeleton } from "../components/video-grid-skeleton";
 import { useBlockedFilter } from "../hooks/use-blocked-filter";
 import { streamQueryOptions } from "../hooks/use-stream";
-import { useSubscriptionFeed } from "../hooks/use-subscription-feed";
-import { useSubscriptions } from "../hooks/use-subscriptions";
+import { SUBSCRIPTION_FEED_KEY, useSubscriptionFeed } from "../hooks/use-subscription-feed";
+import { SUBSCRIPTIONS_KEY, useSubscriptions } from "../hooks/use-subscriptions";
 import { ApiError } from "../lib/api";
+import { fetchSubscriptionFeed, fetchSubscriptions } from "../lib/api-user";
 
-type SubscriptionView = "videos" | "channels";
+const SUBSCRIPTION_STALE_MS = 5 * 60 * 1000;
 
-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 nextSubscriptionPage(
+  last: Awaited<ReturnType<typeof fetchSubscriptionFeed>>,
+  pages: unknown[],
+) {
+  return last.nextpage !== null ? pages.length : undefined;
 }
 
 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 } =
@@ -30,6 +31,24 @@ function SubscriptionsPage() {
   const { filter } = useBlockedFilter();
   const visible = useMemo(() => filter(streams), [filter, streams]);
 
+  function prefetchChannels() {
+    void queryClient.prefetchQuery({
+      queryKey: SUBSCRIPTIONS_KEY,
+      queryFn: fetchSubscriptions,
+      staleTime: SUBSCRIPTION_STALE_MS,
+    });
+  }
+
+  function prefetchVideos() {
+    void queryClient.prefetchInfiniteQuery({
+      queryKey: SUBSCRIPTION_FEED_KEY,
+      queryFn: ({ pageParam }) => fetchSubscriptionFeed(pageParam as number),
+      initialPageParam: 0,
+      getNextPageParam: nextSubscriptionPage,
+      staleTime: SUBSCRIPTION_STALE_MS,
+    });
+  }
+
   useEffect(() => {
     if (streams.length > 0) {
       const topVideos = streams.slice(0, 5);
@@ -43,9 +62,7 @@ function SubscriptionsPage() {
     }
   }, [streams, queryClient]);
 
-  if (query.isLoading) return <VideoGridSkeleton idPrefix="subscriptions-list" />;
-
-  if (subscriptions.length === 0) {
+  if (query.isSuccess && subscriptions.length === 0) {
     return (
       <div className="flex items-center justify-center pt-32">
         <p className="text-fg-muted text-sm">No subscriptions yet.</p>
@@ -55,33 +72,13 @@ function SubscriptionsPage() {
 
   return (
     <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 ? (
+      <SubscriptionsHeader
+        active="videos"
+        count={subscriptions.length}
+        onVideosIntent={prefetchVideos}
+        onChannelsIntent={prefetchChannels}
+      />
+      {query.isLoading || isLoading ? (
         <VideoGridSkeleton idPrefix="subscriptions" />
       ) : (
         <>
diff --git a/apps/web/src/routes/subscriptions_.channels.tsx b/apps/web/src/routes/subscriptions_.channels.tsx
new file mode 100644
index 0000000..9679b7f
--- /dev/null
+++ b/apps/web/src/routes/subscriptions_.channels.tsx
@@ -0,0 +1,69 @@
+import { useQueryClient } from "@tanstack/react-query";
+import { createFileRoute } from "@tanstack/react-router";
+import { SubscriptionChannelList } from "../components/subscription-channel-list";
+import { SubscriptionsHeader } from "../components/subscriptions-header";
+import { VideoGridSkeleton } from "../components/video-grid-skeleton";
+import { SUBSCRIPTION_FEED_KEY } from "../hooks/use-subscription-feed";
+import { SUBSCRIPTIONS_KEY, useSubscriptions } from "../hooks/use-subscriptions";
+import { fetchSubscriptionFeed, fetchSubscriptions } from "../lib/api-user";
+
+const SUBSCRIPTION_STALE_MS = 5 * 60 * 1000;
+
+function nextSubscriptionPage(
+  last: Awaited<ReturnType<typeof fetchSubscriptionFeed>>,
+  pages: unknown[],
+) {
+  return last.nextpage !== null ? pages.length : undefined;
+}
+
+function SubscriptionChannelsPage() {
+  const queryClient = useQueryClient();
+  const { query } = useSubscriptions();
+  const subscriptions = query.data ?? [];
+
+  function prefetchChannels() {
+    void queryClient.prefetchQuery({
+      queryKey: SUBSCRIPTIONS_KEY,
+      queryFn: fetchSubscriptions,
+      staleTime: SUBSCRIPTION_STALE_MS,
+    });
+  }
+
+  function prefetchVideos() {
+    void queryClient.prefetchInfiniteQuery({
+      queryKey: SUBSCRIPTION_FEED_KEY,
+      queryFn: ({ pageParam }) => fetchSubscriptionFeed(pageParam as number),
+      initialPageParam: 0,
+      getNextPageParam: nextSubscriptionPage,
+      staleTime: SUBSCRIPTION_STALE_MS,
+    });
+  }
+
+  if (query.isSuccess && subscriptions.length === 0) {
+    return (
+      <div className="flex items-center justify-center pt-32">
+        <p className="text-sm text-fg-muted">No subscriptions yet.</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-5">
+      <SubscriptionsHeader
+        active="channels"
+        count={subscriptions.length}
+        onVideosIntent={prefetchVideos}
+        onChannelsIntent={prefetchChannels}
+      />
+      {query.isLoading ? (
+        <VideoGridSkeleton idPrefix="subscription-channels" />
+      ) : (
+        <SubscriptionChannelList subscriptions={subscriptions} />
+      )}
+    </div>
+  );
+}
+
+export const Route = createFileRoute("/subscriptions_/channels")({
+  component: SubscriptionChannelsPage,
+});
diff --git a/apps/web/src/settings/settings-content-toggles.tsx b/apps/web/src/settings/settings-content-toggles.tsx
index ffcfd82..30584a2 100644
--- a/apps/web/src/settings/settings-content-toggles.tsx
+++ b/apps/web/src/settings/settings-content-toggles.tsx
@@ -108,7 +108,7 @@ function ToggleRows({ options }: { options: ToggleOption[] }) {
   ));
 }
 
-export function SettingsContentToggles() {
+export function SettingsWatchToggles() {
   useHideEverythingTrigger();
   return (
     <>
@@ -116,6 +116,14 @@ export function SettingsContentToggles() {
         Watch page
       </div>
       <ToggleRows options={WATCH_OPTIONS} />
+    </>
+  );
+}
+
+export function SettingsDiscoveryToggles() {
+  useHideEverythingTrigger();
+  return (
+    <>
       <div className="bg-surface-soft/30 px-4 py-2 font-medium text-[11px] text-fg-soft uppercase tracking-wider">
         Discovery surfaces
       </div>
diff --git a/apps/web/src/settings/settings-landing-page.tsx b/apps/web/src/settings/settings-landing-page.tsx
index 9b2853a..d32e96c 100644
--- a/apps/web/src/settings/settings-landing-page.tsx
+++ b/apps/web/src/settings/settings-landing-page.tsx
@@ -1,4 +1,5 @@
 import { useSettings } from "../hooks/use-settings";
+import { SettingsDiscoveryToggles } from "./settings-content-toggles";
 
 const LANDING_OPTIONS = [
   { value: "home", label: "Home" },
@@ -14,8 +15,8 @@ export function SettingsLandingPage() {
 
   return (
     <section className="flex flex-col gap-3">
-      <p className="text-xs font-medium text-fg-soft uppercase tracking-wider px-1">Startup</p>
-      <div className="bg-surface rounded-xl border border-border px-4 py-4 flex flex-col items-start gap-3 sm:flex-row sm:items-center sm:justify-between">
+      <p className="px-1 text-xs font-medium text-fg-soft uppercase tracking-wider">Startup</p>
+      <div className="flex flex-col items-start gap-3 rounded-xl border border-border bg-surface px-4 py-4 sm:flex-row sm:items-center sm:justify-between">
         <div className="flex flex-col gap-1">
           <span className="text-sm text-fg">Default landing page</span>
           <span className="text-xs text-fg-soft">
@@ -35,6 +36,9 @@ export function SettingsLandingPage() {
           ))}
         </select>
       </div>
+      <div className="divide-y divide-border rounded-xl border border-border bg-surface">
+        <SettingsDiscoveryToggles />
+      </div>
     </section>
   );
 }
diff --git a/apps/web/src/settings/settings-video-preferences.tsx b/apps/web/src/settings/settings-video-preferences.tsx
index 8eee068..c7a81ed 100644
--- a/apps/web/src/settings/settings-video-preferences.tsx
+++ b/apps/web/src/settings/settings-video-preferences.tsx
@@ -1,4 +1,4 @@
-import { SettingsContentToggles } from "./settings-content-toggles";
+import { SettingsWatchToggles } from "./settings-content-toggles";
 import { SettingsSponsorBlockPreferences } from "./settings-sponsorblock-preferences";
 
 const SECTION_LABEL = "text-xs font-medium text-fg-soft uppercase tracking-wider px-1";
@@ -10,7 +10,7 @@ export function SettingsVideoPreferences() {
       <p className={SECTION_LABEL}>Content controls</p>
       <div className={CARD}>
         <SettingsSponsorBlockPreferences />
-        <SettingsContentToggles />
+        <SettingsWatchToggles />
       </div>
     </section>
   );
diff --git a/docker-compose.dev.yml b/docker-compose.dev.yml
index 38b53e1..46b3a44 100644
--- a/docker-compose.dev.yml
+++ b/docker-compose.dev.yml
@@ -15,7 +15,11 @@ services:
       - "${HOST_PORT_SERVER_BETA:-18080}:8080"
     env_file: .env
     environment:
+      DATABASE_URL: ${DATABASE_URL:-jdbc:postgresql://postgres:5432/${POSTGRES_DB:-typetype}}
+      DATABASE_USER: ${DATABASE_USER:-${POSTGRES_USER:-typetype}}
+      DATABASE_PASSWORD: ${DATABASE_PASSWORD:-${POSTGRES_PASSWORD:-typetype}}
       DOWNLOADER_SERVICE_URL: http://typetype-downloader:18093
+      YOUTUBE_REMOTE_LOGIN_ENABLED: ${YOUTUBE_REMOTE_LOGIN_ENABLED:-false}
       YOUTUBE_REMOTE_LOGIN_SERVICE_URL: http://typetype-token:8081
       YOUTUBE_REMOTE_LOGIN_CALLBACK_BASE_URL: http://typetype-server:8080
       YOUTUBE_REMOTE_LOGIN_INTERNAL_TOKEN: ${YOUTUBE_REMOTE_LOGIN_INTERNAL_TOKEN:-}
@@ -41,7 +45,9 @@ services:
       HTTP_PORT: "18093"
       PUBLIC_BASE_URL: /api/downloader
       TYPETYPE_API_BASE: http://typetype-server:8080
-      DB_URL: postgres://typetype:typetype@postgres:5432/typetype_downloader?sslmode=disable
+      DB_URL: ${DB_URL:-postgres://${POSTGRES_USER:-typetype}:${POSTGRES_PASSWORD:-typetype}@postgres:5432/typetype_downloader?sslmode=disable}
+      DB_USER: ${DB_USER:-${POSTGRES_USER:-typetype}}
+      DB_PASSWORD: ${DB_PASSWORD:-${POSTGRES_PASSWORD:-typetype}}
       REDIS_HOST: dragonfly
       REDIS_PORT: "6379"
       REDIS_QUEUE_KEY: downloader:queue
@@ -90,9 +96,9 @@ services:
   postgres:
     image: postgres:17
     environment:
-      POSTGRES_DB: typetype
-      POSTGRES_USER: typetype
-      POSTGRES_PASSWORD: typetype
+      POSTGRES_DB: ${POSTGRES_DB:-typetype}
+      POSTGRES_USER: ${POSTGRES_USER:-typetype}
+      POSTGRES_PASSWORD: ${POSTGRES_PASSWORD:-typetype}
     volumes:
       - postgres_data:/var/lib/postgresql/data
     restart: unless-stopped
@@ -103,15 +109,17 @@ services:
       postgres:
         condition: service_started
     environment:
-      PGPASSWORD: typetype
+      POSTGRES_DB: ${POSTGRES_DB:-typetype}
+      POSTGRES_USER: ${POSTGRES_USER:-typetype}
+      PGPASSWORD: ${POSTGRES_PASSWORD:-typetype}
     command:
       - /bin/sh
       - -ec
       - |
-        until pg_isready -h postgres -U typetype -d typetype; do sleep 1; done
-        EXISTS=$$(psql -h postgres -U typetype -d typetype -tAc "SELECT 1 FROM pg_database WHERE datname='typetype_downloader'")
+        until pg_isready -h postgres -U "$$POSTGRES_USER" -d "$$POSTGRES_DB"; do sleep 1; done
+        EXISTS=$$(psql -h postgres -U "$$POSTGRES_USER" -d "$$POSTGRES_DB" -tAc "SELECT 1 FROM pg_database WHERE datname='typetype_downloader'")
         if [ "$$EXISTS" != "1" ]; then
-          psql -h postgres -U typetype -d typetype -c "CREATE DATABASE typetype_downloader"
+          psql -h postgres -U "$$POSTGRES_USER" -d "$$POSTGRES_DB" -c "CREATE DATABASE typetype_downloader"
         fi
     restart: "no"
 
diff --git a/docker-compose.yml b/docker-compose.yml
index 715c645..227bb72 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -15,18 +15,18 @@ services:
       - "${HOST_PORT_SERVER:-8080}:8080"
     environment:
       ALLOWED_ORIGINS: ${ALLOWED_ORIGINS:-http://localhost:8082,http://127.0.0.1:8082,http://localhost:5173,http://127.0.0.1:5173}
-      DATABASE_URL: ${DATABASE_URL:-jdbc:postgresql://postgres:5432/typetype}
-      DATABASE_USER: ${DATABASE_USER:-typetype}
-      DATABASE_PASSWORD: ${DATABASE_PASSWORD:-typetype}
+      DATABASE_URL: ${DATABASE_URL:-jdbc:postgresql://postgres:5432/${POSTGRES_DB:-typetype}}
+      DATABASE_USER: ${DATABASE_USER:-${POSTGRES_USER:-typetype}}
+      DATABASE_PASSWORD: ${DATABASE_PASSWORD:-${POSTGRES_PASSWORD:-typetype}}
       DRAGONFLY_URL: ${DRAGONFLY_URL:-redis://dragonfly:6379}
       GITHUB_REPO: ${GITHUB_REPO:-Priveetee/TypeType-Server}
       GITHUB_ISSUE_TEMPLATE: ${GITHUB_ISSUE_TEMPLATE:-bug_report_backend.md}
       DOWNLOADER_SERVICE_URL: http://typetype-downloader:18093
+      YOUTUBE_REMOTE_LOGIN_ENABLED: ${YOUTUBE_REMOTE_LOGIN_ENABLED:-true}
       YOUTUBE_REMOTE_LOGIN_SERVICE_URL: http://typetype-token:8081
       YOUTUBE_REMOTE_LOGIN_CALLBACK_BASE_URL: http://typetype-server:8080
       YOUTUBE_REMOTE_LOGIN_INTERNAL_TOKEN: ${YOUTUBE_REMOTE_LOGIN_INTERNAL_TOKEN:-}
       YOUTUBE_REMOTE_LOGIN_INTERNAL_TOKEN_FILE: /run/typetype-secrets/youtube_remote_login_internal_token
-      YOUTUBE_SESSION_ENCRYPTION_KEY: ${YOUTUBE_SESSION_ENCRYPTION_KEY:-}
       YOUTUBE_SESSION_ENCRYPTION_KEY_FILE: /run/typetype-secrets/youtube_session_encryption_key
       YOUTUBE_REMOTE_LOGIN_TTL_MS: ${YOUTUBE_REMOTE_LOGIN_TTL_MS:-480000}
       YOUTUBE_REMOTE_LOGIN_MAX_SESSIONS: ${YOUTUBE_REMOTE_LOGIN_MAX_SESSIONS:-2}
@@ -75,7 +75,7 @@ services:
       HTTP_PORT: "18093"
       PUBLIC_BASE_URL: /api/downloader
       TYPETYPE_API_BASE: http://typetype-server:8080
-      DB_URL: postgres://typetype:typetype@postgres:5432/typetype_downloader?sslmode=disable
+      DB_URL: ${DB_URL:-postgres://${POSTGRES_USER:-typetype}:${POSTGRES_PASSWORD:-typetype}@postgres:5432/typetype_downloader?sslmode=disable}
       REDIS_HOST: dragonfly
       REDIS_PORT: "6379"
       REDIS_QUEUE_KEY: downloader:queue
@@ -130,9 +130,9 @@ services:
   postgres:
     image: postgres:17
     environment:
-      POSTGRES_DB: typetype
-      POSTGRES_USER: typetype
-      POSTGRES_PASSWORD: typetype
+      POSTGRES_DB: ${POSTGRES_DB:-typetype}
+      POSTGRES_USER: ${POSTGRES_USER:-typetype}
+      POSTGRES_PASSWORD: ${POSTGRES_PASSWORD:-typetype}
     volumes:
       - postgres_data:/var/lib/postgresql/data
     restart: unless-stopped
@@ -143,15 +143,17 @@ services:
       postgres:
         condition: service_started
     environment:
-      PGPASSWORD: typetype
+      POSTGRES_DB: ${POSTGRES_DB:-typetype}
+      POSTGRES_USER: ${POSTGRES_USER:-typetype}
+      PGPASSWORD: ${POSTGRES_PASSWORD:-typetype}
     command:
       - /bin/sh
       - -ec
       - |
-        until pg_isready -h postgres -U typetype -d typetype; do sleep 1; done
-        EXISTS=$$(psql -h postgres -U typetype -d typetype -tAc "SELECT 1 FROM pg_database WHERE datname='typetype_downloader'")
+        until pg_isready -h postgres -U "$$POSTGRES_USER" -d "$$POSTGRES_DB"; do sleep 1; done
+        EXISTS=$$(psql -h postgres -U "$$POSTGRES_USER" -d "$$POSTGRES_DB" -tAc "SELECT 1 FROM pg_database WHERE datname='typetype_downloader'")
         if [ "$$EXISTS" != "1" ]; then
-          psql -h postgres -U typetype -d typetype -c "CREATE DATABASE typetype_downloader"
+          psql -h postgres -U "$$POSTGRES_USER" -d "$$POSTGRES_DB" -c "CREATE DATABASE typetype_downloader"
         fi
     restart: "no"
 
diff --git a/scripts/setup-stack.sh b/scripts/setup-stack.sh
index 561772a..d43f5c0 100755
--- a/scripts/setup-stack.sh
+++ b/scripts/setup-stack.sh
@@ -9,9 +9,9 @@ DEFAULT_HOST_PORT_WEB="8082"
 DEFAULT_HOST_PORT_SERVER="8080"
 DEFAULT_HOST_PORT_TOKEN="8081"
 DEFAULT_HOST_PORT_GARAGE_S3="3900"
-DEFAULT_DATABASE_URL="jdbc:postgresql://postgres:5432/typetype"
-DEFAULT_DATABASE_USER="typetype"
-DEFAULT_DATABASE_PASSWORD="typetype"
+DEFAULT_POSTGRES_DB="typetype"
+DEFAULT_POSTGRES_USER="typetype"
+DEFAULT_POSTGRES_PASSWORD="typetype"
 DEFAULT_DRAGONFLY_URL="redis://dragonfly:6379"
 DEFAULT_GITHUB_REPO="Priveetee/TypeType-Server"
 DEFAULT_GITHUB_ISSUE_TEMPLATE="bug_report_backend.md"
@@ -201,9 +201,9 @@ if [[ -f "${ENV_FILE}" ]]; then
     prompt_value HOST_PORT_WEB "HOST_PORT_WEB" "${DEFAULT_HOST_PORT_WEB}"
     prompt_value HOST_PORT_SERVER "HOST_PORT_SERVER" "${DEFAULT_HOST_PORT_SERVER}"
     prompt_value HOST_PORT_TOKEN "HOST_PORT_TOKEN" "${DEFAULT_HOST_PORT_TOKEN}"
-    prompt_value DATABASE_URL "DATABASE_URL" "${DEFAULT_DATABASE_URL}"
-    prompt_value DATABASE_USER "DATABASE_USER" "${DEFAULT_DATABASE_USER}"
-    prompt_value DATABASE_PASSWORD "DATABASE_PASSWORD" "${DEFAULT_DATABASE_PASSWORD}"
+    prompt_value POSTGRES_DB "POSTGRES_DB" "${DEFAULT_POSTGRES_DB}"
+    prompt_value POSTGRES_USER "POSTGRES_USER" "${DEFAULT_POSTGRES_USER}"
+    prompt_value POSTGRES_PASSWORD "POSTGRES_PASSWORD" "${DEFAULT_POSTGRES_PASSWORD}"
     prompt_value DRAGONFLY_URL "DRAGONFLY_URL" "${DEFAULT_DRAGONFLY_URL}"
     prompt_value GITHUB_REPO "GITHUB_REPO" "${DEFAULT_GITHUB_REPO}"
     prompt_value GITHUB_ISSUE_TEMPLATE "GITHUB_ISSUE_TEMPLATE" "${DEFAULT_GITHUB_ISSUE_TEMPLATE}"
@@ -215,9 +215,9 @@ ALLOWED_ORIGINS=${ALLOWED_ORIGINS}
 HOST_PORT_WEB=${HOST_PORT_WEB}
 HOST_PORT_SERVER=${HOST_PORT_SERVER}
 HOST_PORT_TOKEN=${HOST_PORT_TOKEN}
-DATABASE_URL=${DATABASE_URL}
-DATABASE_USER=${DATABASE_USER}
-DATABASE_PASSWORD=${DATABASE_PASSWORD}
+POSTGRES_DB=${POSTGRES_DB}
+POSTGRES_USER=${POSTGRES_USER}
+POSTGRES_PASSWORD=${POSTGRES_PASSWORD}
 DRAGONFLY_URL=${DRAGONFLY_URL}
 GITHUB_REPO=${GITHUB_REPO}
 GITHUB_ISSUE_TEMPLATE=${GITHUB_ISSUE_TEMPLATE}
@@ -231,9 +231,9 @@ else
   prompt_value HOST_PORT_WEB "HOST_PORT_WEB" "${DEFAULT_HOST_PORT_WEB}"
   prompt_value HOST_PORT_SERVER "HOST_PORT_SERVER" "${DEFAULT_HOST_PORT_SERVER}"
   prompt_value HOST_PORT_TOKEN "HOST_PORT_TOKEN" "${DEFAULT_HOST_PORT_TOKEN}"
-  prompt_value DATABASE_URL "DATABASE_URL" "${DEFAULT_DATABASE_URL}"
-  prompt_value DATABASE_USER "DATABASE_USER" "${DEFAULT_DATABASE_USER}"
-  prompt_value DATABASE_PASSWORD "DATABASE_PASSWORD" "${DEFAULT_DATABASE_PASSWORD}"
+  prompt_value POSTGRES_DB "POSTGRES_DB" "${DEFAULT_POSTGRES_DB}"
+  prompt_value POSTGRES_USER "POSTGRES_USER" "${DEFAULT_POSTGRES_USER}"
+  prompt_value POSTGRES_PASSWORD "POSTGRES_PASSWORD" "${DEFAULT_POSTGRES_PASSWORD}"
   prompt_value DRAGONFLY_URL "DRAGONFLY_URL" "${DEFAULT_DRAGONFLY_URL}"
   prompt_value GITHUB_REPO "GITHUB_REPO" "${DEFAULT_GITHUB_REPO}"
   prompt_value GITHUB_ISSUE_TEMPLATE "GITHUB_ISSUE_TEMPLATE" "${DEFAULT_GITHUB_ISSUE_TEMPLATE}"
@@ -245,9 +245,9 @@ ALLOWED_ORIGINS=${ALLOWED_ORIGINS}
 HOST_PORT_WEB=${HOST_PORT_WEB}
 HOST_PORT_SERVER=${HOST_PORT_SERVER}
 HOST_PORT_TOKEN=${HOST_PORT_TOKEN}
-DATABASE_URL=${DATABASE_URL}
-DATABASE_USER=${DATABASE_USER}
-DATABASE_PASSWORD=${DATABASE_PASSWORD}
+POSTGRES_DB=${POSTGRES_DB}
+POSTGRES_USER=${POSTGRES_USER}
+POSTGRES_PASSWORD=${POSTGRES_PASSWORD}
 DRAGONFLY_URL=${DRAGONFLY_URL}
 GITHUB_REPO=${GITHUB_REPO}
 GITHUB_ISSUE_TEMPLATE=${GITHUB_ISSUE_TEMPLATE}