diff --git a/public/css/main.css b/public/css/main.css
index 8d59600..84e9f5a 100644
--- a/public/css/main.css
+++ b/public/css/main.css
@@ -3293,6 +3293,35 @@ kbd {
   height: 40px;
 }
 
+/* Loading Spinner */
+.watch-loading {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: none;
+  z-index: 15;
+}
+
+.watch-loading.show {
+  display: block;
+}
+
+.watch-loading .loading-spinner {
+  width: 48px;
+  height: 48px;
+  border: 3px solid rgba(255, 255, 255, 0.2);
+  border-top-color: var(--color-accent);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
 /* Bottom Bar */
 .watch-bottom-bar {
   padding: var(--space-md) var(--space-lg);
@@ -3382,6 +3411,68 @@ kbd {
   height: 24px;
 }
 
+/* Captions Menu */
+.watch-captions-wrapper {
+  position: relative;
+}
+
+.watch-captions-menu {
+  position: absolute;
+  bottom: 100%;
+  right: 0;
+  margin-bottom: var(--space-sm);
+  background: var(--glass-bg);
+  backdrop-filter: blur(16px);
+  border: 1px solid var(--glass-border);
+  border-radius: var(--radius-md);
+  min-width: 160px;
+  overflow: hidden;
+  box-shadow: var(--shadow-lg);
+  z-index: 30;
+}
+
+.watch-captions-menu.hidden {
+  display: none;
+}
+
+.captions-menu-title {
+  padding: var(--space-sm) var(--space-md);
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  color: var(--color-text-muted);
+  border-bottom: 1px solid var(--glass-border);
+}
+
+.captions-menu-list {
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+.captions-option {
+  display: block;
+  width: 100%;
+  padding: var(--space-sm) var(--space-md);
+  background: none;
+  border: none;
+  color: var(--color-text-primary);
+  text-align: left;
+  font-size: 0.875rem;
+  cursor: pointer;
+  transition: background var(--transition-fast);
+}
+
+.captions-option:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.captions-option.active {
+  color: var(--color-accent);
+}
+
+.captions-option.active::before {
+  content: "✓ ";
+}
+
 .watch-btn-lg {
   width: 64px;
   height: 64px;
@@ -3433,7 +3524,7 @@ kbd {
 /* Scroll Hint */
 .watch-scroll-hint {
   position: absolute;
-  bottom: 100px;
+  bottom: 20px;
   left: 50%;
   transform: translateX(-50%);
   display: flex;
diff --git a/public/index.html b/public/index.html
index 80a89fd..78a7a09 100644
--- a/public/index.html
+++ b/public/index.html
@@ -126,33 +126,65 @@
 
           <!-- Video Player Area -->
           <section class="player-section">
-            <div class="video-container">
-              <video id="video-player" controls playsinline></video>
+            <div class="video-container" id="video-container">
+              <video id="video-player" playsinline></video>
 
-              <!-- Custom Mobile Controls -->
-              <div class="video-controls" id="video-controls">
-                <button class="video-control-btn" id="btn-play" title="Play/Pause">
+              <!-- Custom Controls Overlay -->
+              <div class="watch-overlay hidden" id="player-controls-overlay">
+                <!-- Top Bar -->
+                <div class="watch-top-bar">
+                  <h2 class="watch-title-overlay" id="player-channel-name"></h2>
+                </div>
+
+                <!-- Center: Large Play Button -->
+                <button class="watch-center-play" id="player-center-play">
                   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="icon">
                     <path d="M8 5v14l11-7z" />
                   </svg>
                 </button>
-                <button class="video-control-btn" id="btn-mute" title="Mute/Unmute">
-                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="icon">
-                    <path
-                      d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z" />
-                  </svg>
-                </button>
-                <button class="video-control-btn" id="btn-pip" title="Picture in Picture">
-                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="icon">
-                    <path
-                      d="M19 7h-8v6h8V7zm2-4H3c-1.1 0-2 .9-2 2v14c0 1.1.9 1.98 2 1.98h18c1.1 0 2-.88 2-1.98V5c0-1.1-.9-2-2-2zm0 16.01H3V4.98h18v14.03z" />
-                  </svg>
-                </button>
-                <button class="video-control-btn" id="btn-fullscreen" title="Fullscreen">
-                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="icon">
-                    <path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" />
-                  </svg>
-                </button>
+
+                <!-- Loading Spinner -->
+                <div class="watch-loading" id="player-loading">
+                  <div class="loading-spinner"></div>
+                </div>
+
+                <!-- Bottom Bar: Controls -->
+                <div class="watch-bottom-bar">
+                  <div class="watch-controls">
+                    <button class="watch-btn watch-btn-lg" id="btn-play" title="Play/Pause">
+                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
+                        class="icon icon-play">
+                        <path d="M8 5v14l11-7z" />
+                      </svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
+                        class="icon icon-pause hidden">
+                        <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z" />
+                      </svg>
+                    </button>
+
+                    <div class="watch-spacer"></div>
+
+                    <button class="watch-btn" id="btn-mute" title="Mute">
+                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
+                        class="icon icon-vol">
+                        <path
+                          d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z" />
+                      </svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
+                        class="icon icon-muted hidden">
+                        <path
+                          d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z" />
+                      </svg>
+                    </button>
+                    <input type="range" class="watch-volume" id="player-volume" min="0" max="100" value="80">
+
+                    <button class="watch-btn" id="btn-fullscreen" title="Fullscreen">
+                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="icon">
+                        <path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" />
+                      </svg>
+                    </button>
+                  </div>
+                </div>
               </div>
 
               <div class="player-overlay" id="player-overlay">
@@ -569,6 +601,11 @@
               </svg>
             </button>
 
+            <!-- Loading Spinner -->
+            <div class="watch-loading" id="watch-loading">
+              <div class="loading-spinner"></div>
+            </div>
+
             <!-- Bottom Bar: Controls -->
             <div class="watch-bottom-bar">
               <div class="watch-progress-container">
@@ -611,6 +648,21 @@
                   </svg>
                 </button>
                 <input type="range" class="watch-volume" id="watch-volume" min="0" max="100" value="80">
+                <!-- Captions Button -->
+                <div class="watch-captions-wrapper">
+                  <button class="watch-btn" id="watch-captions-btn" title="Captions">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="icon">
+                      <path
+                        d="M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm-8 7H9.5v-.5h-2v3h2V13H11v1c0 .55-.45 1-1 1H7c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1h3c.55 0 1 .45 1 1v1zm7 0h-1.5v-.5h-2v3h2V13H18v1c0 .55-.45 1-1 1h-3c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1h3c.55 0 1 .45 1 1v1z" />
+                    </svg>
+                  </button>
+                  <div class="watch-captions-menu hidden" id="watch-captions-menu">
+                    <div class="captions-menu-title">Subtitles</div>
+                    <div class="captions-menu-list" id="watch-captions-list">
+                      <button class="captions-option active" data-index="-1">Off</button>
+                    </div>
+                  </div>
+                </div>
                 <button class="watch-btn" id="watch-fullscreen" title="Fullscreen">
                   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="icon">
                     <path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" />
diff --git a/public/js/components/VideoPlayer.js b/public/js/components/VideoPlayer.js
index cadf9a3..29f7f2a 100644
--- a/public/js/components/VideoPlayer.js
+++ b/public/js/components/VideoPlayer.js
@@ -141,124 +141,186 @@ class VideoPlayer {
     /**
      * Initialize custom video controls for mobile
      */
+    /**
+     * Initialize custom video controls
+     */
     initCustomControls() {
+        // Elements
+        this.controlsOverlay = document.getElementById('player-controls-overlay');
+        this.centerPlayBtn = document.getElementById('player-center-play');
+        this.loadingSpinner = document.getElementById('player-loading');
+
         const btnPlay = document.getElementById('btn-play');
         const btnMute = document.getElementById('btn-mute');
-        const btnPip = document.getElementById('btn-pip');
         const btnFullscreen = document.getElementById('btn-fullscreen');
-        const controls = document.getElementById('video-controls');
+        const volumeSlider = document.getElementById('player-volume');
+        const channelNameEl = document.getElementById('player-channel-name');
 
-        if (!btnPlay || !btnMute || !btnPip || !btnFullscreen || !controls) return;
+        if (!this.controlsOverlay) return;
 
-        // Always use native controls
-        this.video.controls = true;
+        // Disable native controls
+        this.video.controls = false;
 
-        // Play/Pause button
-        btnPlay.addEventListener('click', () => {
+        // Initial State: Hide all overlay elements until content is loaded
+        this.loadingSpinner?.classList.remove('show');
+        this.centerPlayBtn?.classList.remove('show');
+        this.controlsOverlay?.classList.add('hidden');
+
+        // Play/Pause toggle
+        const togglePlay = () => {
             if (this.video.paused) {
                 this.video.play();
             } else {
                 this.video.pause();
             }
+        };
+
+        btnPlay?.addEventListener('click', (e) => {
+            e.stopPropagation();
+            togglePlay();
         });
 
-        // Update play/pause icon
-        const updatePlayIcon = () => {
-            const icon = btnPlay.querySelector('.icon');
-            if (this.video.paused) {
-                icon.innerHTML = '<path d="M8 5v14l11-7z"/>';
-                btnPlay.title = 'Play';
-            } else {
-                icon.innerHTML = '<path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>';
-                btnPlay.title = 'Pause';
+        this.centerPlayBtn?.addEventListener('click', (e) => {
+            e.stopPropagation();
+            togglePlay();
+        });
+
+        // Update play/pause UI
+        const updatePlayUI = () => {
+            const isPaused = this.video.paused;
+
+            // Center button
+            this.centerPlayBtn?.classList.toggle('show', isPaused);
+
+            // Bottom bar button
+            const iconPlay = btnPlay?.querySelector('.icon-play');
+            const iconPause = btnPlay?.querySelector('.icon-pause');
+
+            if (iconPlay && iconPause) {
+                iconPlay.classList.toggle('hidden', !isPaused);
+                iconPause.classList.toggle('hidden', isPaused);
             }
         };
 
-        this.video.addEventListener('play', updatePlayIcon);
-        this.video.addEventListener('pause', updatePlayIcon);
+        this.video.addEventListener('play', updatePlayUI);
+        this.video.addEventListener('pause', updatePlayUI);
 
-        // Mute/Unmute button
-        btnMute.addEventListener('click', () => {
-            this.video.muted = !this.video.muted;
-            btnMute.classList.toggle('muted', this.video.muted);
+        // Loading spinner
+        this.video.addEventListener('waiting', () => {
+            this.loadingSpinner?.classList.add('show');
+            this.centerPlayBtn?.classList.remove('show');
+        });
 
-            // Update icon
-            const icon = btnMute.querySelector('.icon');
+        this.video.addEventListener('canplay', () => {
+            this.loadingSpinner?.classList.remove('show');
+            if (this.video.paused) {
+                this.centerPlayBtn?.classList.add('show');
+            }
+        });
+
+        // Mute/Volume
+        const updateVolumeUI = () => {
+            const isMuted = this.video.muted || this.video.volume === 0;
+            const iconVol = btnMute?.querySelector('.icon-vol');
+            const iconMuted = btnMute?.querySelector('.icon-muted');
+
+            if (iconVol && iconMuted) {
+                iconVol.classList.toggle('hidden', isMuted);
+                iconMuted.classList.toggle('hidden', !isMuted);
+            }
+
+            if (volumeSlider) {
+                volumeSlider.value = this.video.muted ? 0 : Math.round(this.video.volume * 100);
+            }
+        };
+
+        btnMute?.addEventListener('click', (e) => {
+            e.stopPropagation();
             if (this.video.muted) {
-                icon.innerHTML = '<path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"/>';
+                this.video.muted = false;
+                this.video.volume = (parseInt(volumeSlider?.value || 80) / 100) || 0.8;
             } else {
-                icon.innerHTML = '<path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/>';
+                this.video.muted = true;
             }
+            updateVolumeUI();
         });
 
-        // Picture-in-Picture button
-        if (document.pictureInPictureEnabled) {
-            btnPip.addEventListener('click', async () => {
-                try {
-                    if (document.pictureInPictureElement) {
-                        await document.exitPictureInPicture();
-                    } else {
-                        await this.video.requestPictureInPicture();
-                    }
-                } catch (err) {
-                    console.error('PiP error:', err);
-                }
-            });
-        } else {
-            btnPip.style.display = 'none';
-        }
-
-        // Fullscreen button
-        btnFullscreen.addEventListener('click', () => {
-            if (document.fullscreenElement) {
-                document.exitFullscreen();
-            } else {
-                this.container.requestFullscreen().catch(err => {
-                    console.error('Fullscreen error:', err);
-                });
-            }
+        volumeSlider?.addEventListener('input', (e) => {
+            e.stopPropagation();
+            const val = parseInt(e.target.value);
+            this.video.volume = val / 100;
+            this.video.muted = val === 0;
+            updateVolumeUI();
         });
 
-        // Show controls on tap/touch for mobile (only hide after interaction)
-        if (isMobile) {
-            let controlsTimeout;
-            const hideControls = () => {
-                clearTimeout(controlsTimeout);
-                controlsTimeout = setTimeout(() => {
-                    controls.classList.remove('show');
-                }, 4000);
-            };
+        this.video.addEventListener('volumechange', updateVolumeUI);
 
-            const showControls = () => {
-                controls.classList.add('show');
-                hideControls();
-            };
-
-            this.video.addEventListener('click', showControls);
-            this.video.addEventListener('touchstart', showControls);
-
-            // Keep controls visible when video is paused
-            this.video.addEventListener('pause', () => {
-                controls.classList.add('show');
-                clearTimeout(controlsTimeout);
-            });
-
-            this.video.addEventListener('play', () => {
-                hideControls();
-            });
-        }
-
-        // Update fullscreen icon
-        document.addEventListener('fullscreenchange', () => {
-            const icon = btnFullscreen.querySelector('.icon');
-            if (document.fullscreenElement) {
-                icon.innerHTML = '<path d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"/>';
-            } else {
-                icon.innerHTML = '<path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/>';
-            }
+        // Fullscreen
+        btnFullscreen?.addEventListener('click', (e) => {
+            e.stopPropagation();
+            this.toggleFullscreen();
         });
+
+        this.container.addEventListener('dblclick', () => this.toggleFullscreen());
+
+        // Overlay Auto-hide Logic
+        let overlayTimeout;
+
+        const showOverlay = () => {
+            this.controlsOverlay.classList.remove('hidden');
+            this.container.style.cursor = 'default';
+            resetOverlayTimer();
+        };
+
+        const hideOverlay = () => {
+            if (!this.video.paused) {
+                this.controlsOverlay.classList.add('hidden');
+                this.container.style.cursor = 'none';
+            }
+        };
+
+        const resetOverlayTimer = () => {
+            clearTimeout(overlayTimeout);
+            if (!this.video.paused) {
+                overlayTimeout = setTimeout(hideOverlay, 3000);
+            }
+        };
+
+        this.container.addEventListener('mousemove', showOverlay);
+        this.container.addEventListener('click', showOverlay);
+        this.container.addEventListener('touchstart', showOverlay);
+
+        this.video.addEventListener('play', resetOverlayTimer);
+        this.video.addEventListener('pause', showOverlay);
+
+        // Update Title when channel changes
+        window.addEventListener('channelChanged', (e) => {
+            if (channelNameEl && e.detail) {
+                channelNameEl.textContent = e.detail.name || e.detail.tvgName || 'Live TV';
+            }
+            showOverlay();
+        });
+
+        // Initial state
+        updatePlayUI();
+        updateVolumeUI();
     }
 
+    /**
+     * Toggle fullscreen mode
+     */
+    toggleFullscreen() {
+        if (document.fullscreenElement) {
+            document.exitFullscreen();
+        } else {
+            this.container.requestFullscreen().catch(err => {
+                console.error('Fullscreen error:', err);
+            });
+        }
+    }
+
+
+
     init() {
         // Apply default/remembered volume
         const volume = this.settings.rememberVolume ? this.settings.lastVolume : this.settings.defaultVolume;
@@ -462,6 +524,10 @@ class VideoPlayer {
             // Hide "select a channel" overlay
             this.overlay.classList.add('hidden');
 
+            // Show custom controls overlay
+            this.controlsOverlay?.classList.remove('hidden');
+            this.loadingSpinner?.classList.add('show');
+
             // Determine if HLS or direct stream
             this.currentUrl = streamUrl;
 
@@ -766,6 +832,13 @@ class VideoPlayer {
         this.video.pause();
         this.video.src = '';
         this.video.load();
+
+        // Reset UI to idle state
+        this.overlay.classList.remove('hidden'); // Show "Select a channel"
+        this.controlsOverlay?.classList.add('hidden'); // Hide controls
+        this.loadingSpinner?.classList.remove('show');
+        this.centerPlayBtn?.classList.remove('show');
+        this.nowPlaying.classList.add('hidden');
     }
 
     /**
diff --git a/public/js/pages/WatchPage.js b/public/js/pages/WatchPage.js
index 3555951..b42ebf5 100644
--- a/public/js/pages/WatchPage.js
+++ b/public/js/pages/WatchPage.js
@@ -28,6 +28,7 @@ class WatchPage {
         this.timeCurrent = document.getElementById('watch-time-current');
         this.timeTotal = document.getElementById('watch-time-total');
         this.scrollHint = document.getElementById('watch-scroll-hint');
+        this.loadingSpinner = document.getElementById('watch-loading');
 
         // Next episode
         this.nextEpisodePanel = document.getElementById('watch-next-episode');
@@ -53,6 +54,11 @@ class WatchPage {
         this.episodesSection = document.getElementById('watch-episodes');
         this.seasonsContainer = document.getElementById('watch-seasons');
 
+        // Captions
+        this.captionsBtn = document.getElementById('watch-captions-btn');
+        this.captionsMenu = document.getElementById('watch-captions-menu');
+        this.captionsList = document.getElementById('watch-captions-list');
+
         // State
         this.hls = null;
         this.content = null;
@@ -62,6 +68,7 @@ class WatchPage {
         this.currentEpisode = null;
         this.isFavorite = false;
         this.returnPage = null;
+        this.captionsMenuOpen = false;
 
         // Overlay timer
         this.overlayTimeout = null;
@@ -105,6 +112,8 @@ class WatchPage {
         this.video?.addEventListener('pause', () => this.onPause());
         this.video?.addEventListener('ended', () => this.onEnded());
         this.video?.addEventListener('error', (e) => this.onError(e));
+        this.video?.addEventListener('waiting', () => this.showLoading());
+        this.video?.addEventListener('canplay', () => this.hideLoading());
 
         // Overlay auto-hide
         const watchSection = document.querySelector('.watch-video-section');
@@ -122,6 +131,19 @@ class WatchPage {
         this.nextPlayNowBtn?.addEventListener('click', () => this.playNextEpisode());
         this.nextCancelBtn?.addEventListener('click', () => this.cancelNextEpisode());
 
+        // Captions toggle
+        this.captionsBtn?.addEventListener('click', (e) => {
+            e.stopPropagation();
+            this.toggleCaptionsMenu();
+        });
+
+        // Close captions menu when clicking outside
+        document.addEventListener('click', (e) => {
+            if (this.captionsMenuOpen && !this.captionsMenu?.contains(e.target) && e.target !== this.captionsBtn) {
+                this.closeCaptionsMenu();
+            }
+        });
+
         // Hide scroll hint after scrolling
         const watchPage = document.getElementById('page-watch');
         watchPage?.addEventListener('scroll', () => {
@@ -187,6 +209,9 @@ class WatchPage {
         // Stop any existing playback
         this.stop();
 
+        // Show loading spinner
+        this.showLoading();
+
         // Get settings for proxy/transcode
         let settings = {};
         try {
@@ -383,7 +408,11 @@ class WatchPage {
     }
 
     onError(e) {
-        console.error('Video error:', e);
+        // Only log actual fatal errors, not benign stream recovery events
+        const error = this.video?.error;
+        if (error && error.code) {
+            console.error('[WatchPage] Video error:', error.code, error.message);
+        }
     }
 
     updateVolumeUI() {
@@ -403,6 +432,87 @@ class WatchPage {
         return `${m}:${s.toString().padStart(2, '0')}`;
     }
 
+    // === Loading Spinner ===
+
+    showLoading() {
+        this.loadingSpinner?.classList.add('show');
+        this.centerPlayBtn?.classList.remove('show');
+    }
+
+    hideLoading() {
+        this.loadingSpinner?.classList.remove('show');
+    }
+
+    // === Captions ===
+
+    toggleCaptionsMenu() {
+        if (this.captionsMenuOpen) {
+            this.closeCaptionsMenu();
+        } else {
+            this.updateCaptionsTracks();
+            this.captionsMenu?.classList.remove('hidden');
+            this.captionsMenuOpen = true;
+        }
+    }
+
+    closeCaptionsMenu() {
+        this.captionsMenu?.classList.add('hidden');
+        this.captionsMenuOpen = false;
+    }
+
+    updateCaptionsTracks() {
+        if (!this.captionsList || !this.video) return;
+
+        // Build list of available text tracks
+        const tracks = this.video.textTracks;
+        let html = '<button class="captions-option" data-index="-1">Off</button>';
+
+        for (let i = 0; i < tracks.length; i++) {
+            const track = tracks[i];
+            if (track.kind === 'subtitles' || track.kind === 'captions') {
+                const label = track.label || track.language || `Track ${i + 1}`;
+                const isActive = track.mode === 'showing';
+                html += `<button class="captions-option ${isActive ? 'active' : ''}" data-index="${i}">${label}</button>`;
+            }
+        }
+
+        // Check if any track is active, if not mark "Off" as active
+        let anyActive = false;
+        for (let i = 0; i < tracks.length; i++) {
+            if (tracks[i].mode === 'showing') anyActive = true;
+        }
+        if (!anyActive) {
+            html = html.replace('class="captions-option"', 'class="captions-option active"');
+        }
+
+        this.captionsList.innerHTML = html;
+
+        // Add click handlers
+        this.captionsList.querySelectorAll('.captions-option').forEach(btn => {
+            btn.addEventListener('click', () => this.selectCaptionTrack(parseInt(btn.dataset.index)));
+        });
+    }
+
+    selectCaptionTrack(index) {
+        if (!this.video) return;
+
+        const tracks = this.video.textTracks;
+
+        // Disable all tracks
+        for (let i = 0; i < tracks.length; i++) {
+            tracks[i].mode = 'hidden';
+        }
+
+        // Enable selected track
+        if (index >= 0 && index < tracks.length) {
+            tracks[index].mode = 'showing';
+        }
+
+        // Update UI
+        this.updateCaptionsTracks();
+        this.closeCaptionsMenu();
+    }
+
     // === Overlay Auto-Hide ===
 
     showOverlay() {