diff --git a/UI_UPDATE.MD b/UI_UPDATE.MD
index 3bff8cb..7e8623e 100644
--- a/UI_UPDATE.MD
+++ b/UI_UPDATE.MD
@@ -54,40 +54,40 @@ Always come back and update UI_UPDATE.MD once complete with task and task item.
 ### Sub-task 1.2: JavaScript Separation and Organization
 
 #### 1.2.1: JavaScript Code Identification
-- [ ] Locate all JavaScript code within `<script>` tags in index.php
-- [ ] Identify JavaScript functions, event handlers, and global functions
-- [ ] Map dependencies between different JavaScript sections
-- [ ] Document any PHP- generated JavaScript content
+- [x] Locate all JavaScript code within `<script>` tags in index.php
+- [x] Identify JavaScript functions, event handlers, and global functions
+- [x] Map dependencies between different JavaScript sections
+- [x] Document any PHP- generated JavaScript content
 
 #### 1.2.2: Core App.js Structure Creation
-- [ ] Create new app.js main file
-- [ ] Define application configuration object
-- [ ] Set up basic module loading structure
-- [ ] Implement global error handling and logging
+- [x] Create new app.js main file
+- [x] Define application configuration object
+- [x] Set up basic module loading structure
+- [x] Implement global error handling and logging
 
 #### 1.2.3: Video Player Module Extraction
-- [ ] Extract Video.js initialization code into video-player.js
-- [ ] Separate video control functions
-- [ ] Move stream status management logic
-- [ ] Maintain error handling for video playback
+- [x] Extract Video.js initialization code into video-player.js
+- [x] Separate video control functions
+- [x] Move stream status management logic
+- [x] Maintain error handling for video playback
 
 #### 1.2.4: Chat System Module Creation
-- [ ] Extract chat functionality into chat.js
-- [ ] Separate message handling and UI updates
-- [ ] Move user authentication and admin functions
-- [ ] Implement event delegation for chat interactions
+- [x] Extract chat functionality into chat.js
+- [x] Separate message handling and UI updates
+- [x] Move user authentication and admin functions
+- [x] Implement event delegation for chat interactions
 
 #### 1.2.5: UI Controls Module Development
-- [ ] Extract UI toggle and control functions into ui-controls.js
-- [ ] Separate keyboard shortcuts implementation
-- [ ] Move notification and toast management
-- [ ] Create utility functions for DOM manipulation
+- [x] Extract UI toggle and control functions into ui-controls.js
+- [x] Separate keyboard shortcuts implementation
+- [x] Move notification and toast management
+- [x] Create utility functions for DOM manipulation
 
 #### 1.2.6: API Communication Module
-- [ ] Extract AJAX/Fetch calls into api.js
-- [ ] Create functions for heartbeat, message sending, and data fetching
-- [ ] Implement API error handling and retry logic
-- [ ] Separate WebSocket or polling mechanisms
+- [x] Extract AJAX/Fetch calls into api.js
+- [x] Create functions for heartbeat, message sending, and data fetching
+- [x] Implement API error handling and retry logic
+- [x] Separate WebSocket or polling mechanisms
 
 ### Sub-task 1.3: HTML Structure Refactoring
 
diff --git a/api.js b/api.js
new file mode 100644
index 0000000..bcd7b0e
--- /dev/null
+++ b/api.js
@@ -0,0 +1,222 @@
+// API Communication Module
+// Handles all AJAX/Fetch calls and API interactions
+
+(function() {
+    'use strict';
+
+    AppModules.register('api');
+
+    const API_BASE_URL = '';
+
+    // Generic fetch wrapper with error handling and retries
+    function apiRequest(endpoint, options = {}) {
+        const url = endpoint.startsWith('?') ? endpoint : `${API_BASE_URL}${endpoint}`;
+
+        return fetch(url, {
+            method: options.method || 'GET',
+            headers: {
+                'Content-Type': 'application/x-www-form-urlencoded',
+                ...options.headers
+            },
+            body: options.body
+        })
+        .then(response => {
+            if (!response.ok) {
+                throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+            }
+            return response.json();
+        })
+        .catch(error => {
+            AppLogger.error(`API request to ${endpoint} failed:`, error);
+            throw error;
+        });
+    }
+
+    // Stream status checking
+    function checkStreamStatus() {
+        return apiRequest('?api=stream_status')
+            .then(data => {
+                AppLogger.log('Stream status check:', data);
+                return data.online === true;
+            })
+            .catch(error => {
+                AppLogger.error('Stream status check failed:', error);
+                return false; // Assume offline if check fails
+            });
+    }
+
+    // User management
+    function getUserId() {
+        return apiRequest('', {
+            method: 'POST',
+            body: 'action=get_user_id'
+        })
+        .then(data => {
+            if (data.success) {
+                AppState.userId = data.user_id;
+                AppState.isAdmin = data.is_admin || false;
+
+                const userIdElement = document.getElementById('userId');
+                if (userIdElement) {
+                    userIdElement.textContent = '#' + AppState.userId;
+
+                    if (AppState.isAdmin) {
+                        userIdElement.classList.add('admin');
+                        userIdElement.textContent = '👑 #' + AppState.userId;
+                        const adminControls = document.getElementById('adminControls');
+                        if (adminControls) adminControls.style.display = 'flex';
+                    }
+                }
+
+                return data;
+            } else {
+                throw new Error('Failed to get user ID');
+            }
+        });
+    }
+
+    // Heartbeat functionality
+    function sendHeartbeat() {
+        const nicknameValue = document.getElementById('nickname')?.value || 'Anonymous';
+
+        return apiRequest('', {
+            method: 'POST',
+            body: `action=heartbeat&nickname=${encodeURIComponent(nicknameValue)}`
+        })
+        .then(data => {
+            if (data.success && data.viewer_count !== undefined) {
+                AppState.viewerCount = data.viewer_count;
+                updateViewerCount(data.viewer_count);
+            }
+        })
+        .catch(error => {
+            AppLogger.error('Heartbeat failed:', error);
+        });
+    }
+
+    // Chat message operations
+    function sendMessage(nickname, message) {
+        if (!nickname || !message) {
+            throw new Error('Nickname and message are required');
+        }
+
+        const body = `action=send&nickname=${encodeURIComponent(nickname)}&message=${encodeURIComponent(message)}`;
+
+        return apiRequest('', {
+            method: 'POST',
+            body: body
+        });
+    }
+
+    function fetchMessages() {
+        return apiRequest('', {
+            method: 'POST',
+            body: `action=fetch&last_id=${encodeURIComponent(AppState.lastMessageId)}`
+        })
+        .then(data => {
+            if (data.success) {
+                // Update viewer count
+                if (data.viewer_count !== undefined) {
+                    AppState.viewerCount = data.viewer_count;
+                    updateViewerCount(data.viewer_count);
+                }
+
+                return data;
+            } else {
+                throw new Error('Failed to fetch messages');
+            }
+        })
+        .catch(error => {
+            AppLogger.error('Fetch messages failed:', error);
+            updateConnectionStatus(false);
+            throw error;
+        });
+    }
+
+    // Admin functions
+    function deleteMessage(messageId) {
+        if (!AppState.isAdmin) return Promise.reject(new Error('Admin access required'));
+
+        return apiRequest('', {
+            method: 'POST',
+            body: `action=delete_message&message_id=${encodeURIComponent(messageId)}`
+        })
+        .then(data => {
+            if (data.success) {
+                return data;
+            } else {
+                throw new Error('Failed to delete message');
+            }
+        });
+    }
+
+    function banUser(userId) {
+        if (!AppState.isAdmin) return Promise.reject(new Error('Admin access required'));
+
+        return apiRequest('', {
+            method: 'POST',
+            body: `action=ban_user&user_id=${encodeURIComponent(userId)}`
+        })
+        .then(data => {
+            if (data.success) {
+                return data;
+            } else {
+                throw new Error('Failed to ban user');
+            }
+        });
+    }
+
+    function clearChat() {
+        if (!AppState.isAdmin) return Promise.reject(new Error('Admin access required'));
+
+        return apiRequest('', {
+            method: 'POST',
+            body: 'action=clear_chat'
+        })
+        .then(data => {
+            if (data.success) {
+                return data;
+            } else {
+                throw new Error('Failed to clear chat');
+            }
+        });
+    }
+
+    // UI feedback functions (will be moved to ui-controls later, but needed here for now)
+    function updateViewerCount(count) {
+        const viewerElement = document.getElementById('viewerCount');
+        if (viewerElement) {
+            viewerElement.textContent = count + (count === 1 ? ' viewer' : ' viewers');
+        }
+    }
+
+    function updateConnectionStatus(online) {
+        const statusDot = document.getElementById('statusDot');
+        const statusText = document.getElementById('statusText');
+
+        if (statusDot && statusText) {
+            if (online) {
+                statusDot.classList.remove('offline');
+                statusText.textContent = 'Connected';
+            } else {
+                statusDot.classList.add('offline');
+                statusText.textContent = 'Reconnecting...';
+            }
+        }
+    }
+
+    // Public API
+    window.API = {
+        checkStreamStatus: checkStreamStatus,
+        getUserId: getUserId,
+        sendHeartbeat: sendHeartbeat,
+        sendMessage: sendMessage,
+        fetchMessages: fetchMessages,
+        deleteMessage: deleteMessage,
+        banUser: banUser,
+        clearChat: clearChat
+    };
+
+    AppLogger.log('API module loaded');
+
+})();
diff --git a/app.js b/app.js
new file mode 100644
index 0000000..ff8b882
--- /dev/null
+++ b/app.js
@@ -0,0 +1,116 @@
+// Core Dodgers Stream Application
+// Configuration and module loading
+
+const AppConfig = {
+    // API configuration
+    api: {
+        baseUrl: '',
+        heartbeatInterval: 5000,
+        chatPollInterval: 2000,
+        maxRetries: 3,
+        retryDelay: 1000
+    },
+    // Video player configuration
+    video: {
+        defaultVolume: 0.3,
+        maxRetries: 3,
+        recoveryTimeout: 10000,
+        streamMonitoringInterval: 10000,
+        recoveryCheckCount: 5,
+        recoveryCheckInterval: 2000
+    },
+    // UI configuration
+    ui: {
+        animationDuration: 300,
+        mobileBreakpoint: 768,
+        toastDuration: 3000
+    },
+    // Chat configuration
+    chat: {
+        maxMessages: 100,
+        maxMessageLength: 1000,
+        maxNicknameLength: 20,
+        typingTimeout: 1000
+    }
+};
+
+// Global application state
+const AppState = {
+    player: null,
+    userId: '',
+    nickname: '',
+    isAdmin: false,
+    streamMode: 'live', // 'live' or 'placeholder'
+    chatCollapsed: false,
+    unreadCount: 0,
+    soundEnabled: true,
+    lastMessageId: '',
+    allMessages: [],
+    viewerCount: 0,
+    errorRetryCount: 0,
+    isRetrying: false,
+    isRecovering: false,
+    recoveryInterval: null,
+    typingTimer: null,
+    isTyping: false
+};
+
+// Global error handling and logging
+const AppLogger = {
+    log: (message, ...args) => {
+        console.log(`[${new Date().toLocaleTimeString()}] ${message}`, ...args);
+    },
+    error: (message, ...args) => {
+        console.error(`[${new Date().toLocaleTimeString()}] ERROR: ${message}`, ...args);
+    },
+    warn: (message, ...args) => {
+        console.warn(`[${new Date().toLocaleTimeString()}] WARNING: ${message}`, ...args);
+    }
+};
+
+// Module registry for dependencies
+const AppModules = {
+    loaded: new Set(),
+
+    register: function(name) {
+        this.loaded.add(name);
+        AppLogger.log(`Module '${name}' registered`);
+    },
+
+    isLoaded: function(name) {
+        return this.loaded.has(name);
+    },
+
+    require: function(...names) {
+        for (const name of names) {
+            if (!this.isLoaded(name)) {
+                throw new Error(`Required module '${name}' is not loaded`);
+            }
+        }
+    }
+};
+
+// Global error handler
+window.addEventListener('unhandledrejection', (event) => {
+    AppLogger.error('Unhandled promise rejection:', event.reason);
+});
+
+window.addEventListener('error', (event) => {
+    AppLogger.error('Unhandled error:', event.error);
+});
+
+// Initialize application
+document.addEventListener('DOMContentLoaded', () => {
+    AppLogger.log('Dodgers Stream Theater initializing...');
+
+    // Start with basic UI setup
+    const nicknameInput = document.getElementById('nickname');
+    if (nicknameInput && localStorage.getItem('chatNickname')) {
+        nicknameInput.value = localStorage.getItem('chatNickname');
+        AppState.nickname = nicknameInput.value;
+    }
+
+    AppLogger.log('Core application initialized');
+});
+
+AppLogger.log('Core app.js loaded');
diff --git a/chat.js b/chat.js
new file mode 100644
index 0000000..ec289b4
--- /dev/null
+++ b/chat.js
@@ -0,0 +1,414 @@
+// Chat System Module
+// Handles chat functionality, message handling, and user authentication
+
+(function() {
+    'use strict';
+
+    AppModules.require('api', 'ui-controls');
+    AppModules.register('chat');
+
+    // Initialize chat system
+    function initializeChat() {
+        AppLogger.log('Initializing chat system...');
+
+        // Get user ID first
+        API.getUserId()
+            .then(data => {
+                AppLogger.log('Chat initialized with user:', AppState.userId, AppState.isAdmin ? '(admin)' : '');
+
+                // Show admin toast if applicable
+                if (AppState.isAdmin) {
+                    UIControls.showToast('Admin mode activated');
+                }
+
+                // Set up nickname handling
+                const nicknameInput = document.getElementById('nickname');
+                if (nicknameInput) {
+                    // Load saved nickname
+                    const savedNickname = localStorage.getItem('chatNickname');
+                    if (savedNickname) {
+                        nicknameInput.value = savedNickname;
+                    }
+
+                    // Handle nickname changes
+                    UIControls.DOMUtils.addEvent(nicknameInput, 'change', function() {
+                        const nickname = this.value.trim();
+                        localStorage.setItem('chatNickname', nickname);
+                        AppState.nickname = nickname;
+                    });
+                }
+
+                // Set up message input handling
+                const messageInput = document.getElementById('messageInput');
+                if (messageInput) {
+                    // Enter key to send message
+                    UIControls.DOMUtils.addEvent(messageInput, 'keypress', function(e) {
+                        if (e.key === 'Enter' && !e.shiftKey) {
+                            e.preventDefault();
+                            sendMessage();
+                        }
+                    });
+
+                    // Typing indicator
+                    UIControls.DOMUtils.addEvent(messageInput, 'input', function() {
+                        handleTypingIndicator();
+                    });
+                }
+
+                // Set up send button
+                const sendButton = document.querySelector('.chat-input button') ||
+                                  document.querySelector('#messageInput').nextElementSibling;
+                if (sendButton && sendButton.tagName === 'BUTTON') {
+                    UIControls.DOMUtils.addEvent(sendButton, 'click', sendMessage);
+                }
+
+                // Start polling for messages
+                startMessagePolling();
+
+                // Send initial heartbeat
+                API.sendHeartbeat();
+
+                AppLogger.log('Chat system initialized successfully');
+            })
+            .catch(error => {
+                AppLogger.error('Failed to initialize chat:', error);
+                UIControls.showToast('Failed to initialize chat');
+            });
+    }
+
+    // Send message functionality
+    function sendMessage() {
+        const messageInput = document.getElementById('messageInput');
+        const nicknameInput = document.getElementById('nickname');
+        const message = messageInput?.value?.trim() || '';
+        const nickname = nicknameInput?.value?.trim() || '';
+
+        if (!nickname) {
+            if (nicknameInput) {
+                nicknameInput.style.borderColor = 'var(--dodgers-red)';
+                nicknameInput.focus();
+            }
+            UIControls.showToast('Please enter a nickname');
+            setTimeout(() => {
+                if (nicknameInput) nicknameInput.style.borderColor = '#e0e0e0';
+            }, 2000);
+            return;
+        }
+
+        if (!message) {
+            return; // Just return quietly for empty message
+        }
+
+        // Send message via API
+        API.sendMessage(nickname, message)
+            .then(data => {
+                if (data.success) {
+                    if (messageInput) messageInput.value = '';
+                    AppState.nickname = nickname;
+                    // Message will be added automatically by polling
+                } else if (data.error) {
+                    UIControls.showToast(data.error);
+                    UIControls.updateConnectionStatus(false);
+                }
+            })
+            .catch(error => {
+                AppLogger.error('Error sending message:', error);
+                UIControls.showToast('Failed to send message');
+                UIControls.updateConnectionStatus(false);
+            });
+    }
+
+    // Delete message (admin only)
+    function deleteMessage(messageId) {
+        if (!AppState.isAdmin) return;
+
+        if (!confirm('Delete this message?')) return;
+
+        API.deleteMessage(messageId)
+            .then(data => {
+                if (data.success) {
+                    removeMessageFromUI(messageId);
+                    UIControls.showToast('Message deleted');
+                } else {
+                    UIControls.showToast('Failed to delete message');
+                }
+            })
+            .catch(error => {
+                AppLogger.error('Error deleting message:', error);
+                UIControls.showToast('Failed to delete message');
+            });
+    }
+
+    // Ban user (admin only)
+    function banUser(userId) {
+        if (!AppState.isAdmin) return;
+
+        if (!confirm('Ban this user from chat?')) return;
+
+        API.banUser(userId)
+            .then(data => {
+                if (data.success) {
+                    UIControls.showToast('User banned');
+                } else {
+                    UIControls.showToast('Failed to ban user');
+                }
+            })
+            .catch(error => {
+                AppLogger.error('Error banning user:', error);
+                UIControls.showToast('Failed to ban user');
+            });
+    }
+
+    // Clear chat (admin only)
+    function clearChat() {
+        if (!AppState.isAdmin) return;
+
+        if (!confirm('Clear all chat messages?')) return;
+
+        API.clearChat()
+            .then(data => {
+                if (data.success) {
+                    clearMessagesUI();
+                    UIControls.showToast('Chat cleared');
+                    AppState.lastMessageId = '';
+                    API.sendHeartbeat(); // Force refresh all users
+                } else {
+                    UIControls.showToast('Failed to clear chat');
+                }
+            })
+            .catch(error => {
+                AppLogger.error('Error clearing chat:', error);
+                UIControls.showToast('Failed to clear chat');
+            });
+    }
+
+    // Message polling system
+    function startMessagePolling() {
+        // Poll for new messages
+        setInterval(fetchMessages, AppConfig.api.chatPollInterval);
+
+        // Send heartbeat periodically
+        setInterval(API.sendHeartbeat, AppConfig.api.heartbeatInterval);
+
+        // Initial fetch
+        fetchMessages();
+    }
+
+    // Fetch and display messages
+    function fetchMessages() {
+        API.fetchMessages()
+            .then(data => {
+                if (data.success) {
+                    // Handle initial load or message updates
+                    if (data.all_messages !== null) {
+                        // Initial load or forced refresh (like after admin clear)
+                        handleInitialMessageLoad(data);
+                    } else {
+                        // Incremental updates
+                        handleNewMessages(data.messages);
+                    }
+
+                    // Check for admin clear
+                    if (data.message_count === 0 && AppState.allMessages.length > 0) {
+                        handleChatCleared();
+                    }
+
+                    // Update last message ID
+                    if (AppState.allMessages.length > 0) {
+                        AppState.lastMessageId = AppState.allMessages[AppState.allMessages.length - 1].id;
+                    }
+
+                    UIControls.updateConnectionStatus(true);
+                }
+            })
+            .catch(error => {
+                AppLogger.error('Error fetching messages:', error);
+                UIControls.updateConnectionStatus(false);
+            });
+    }
+
+    // Handle initial message load
+    function handleInitialMessageLoad(data) {
+        AppState.allMessages = data.all_messages || [];
+        displayAllMessages();
+    }
+
+    // Handle new messages
+    function handleNewMessages(messages) {
+        if (!messages || messages.length === 0) return;
+
+        messages.forEach(msg => {
+            appendMessage(msg);
+
+            // Show notification if chat is collapsed and message is not from current user
+            if (AppState.chatCollapsed && msg.user_id !== AppState.userId) {
+                AppState.unreadCount++;
+                UIControls.updateNotificationBadge();
+                UIControls.playNotificationSound();
+            }
+        });
+    }
+
+    // Handle chat cleared by admin
+    function handleChatCleared() {
+        const chatMessages = document.getElementById('chatMessages');
+        if (chatMessages) {
+            chatMessages.innerHTML = '<div class="system-message">Chat was cleared by admin</div>';
+        }
+        AppState.allMessages = [];
+        AppState.lastMessageId = '';
+    }
+
+    // Typing indicator system
+    function handleTypingIndicator() {
+        const messageInput = document.getElementById('messageInput');
+        if (!messageInput) return;
+
+        const hasContent = messageInput.value.length > 0;
+
+        if (hasContent && !AppState.isTyping) {
+            AppState.isTyping = true;
+        }
+
+        clearTimeout(AppState.typingTimer);
+        AppState.typingTimer = setTimeout(() => {
+            AppState.isTyping = false;
+        }, AppConfig.chat.typingTimeout);
+    }
+
+    // UI manipulation functions
+    function displayAllMessages() {
+        const chatMessages = document.getElementById('chatMessages');
+
+        if (!chatMessages) return;
+
+        if (AppState.allMessages.length === 0) {
+            chatMessages.innerHTML = '<div class="empty-chat">No messages yet. Be the first to say hello! 👋</div>';
+            AppState.lastMessageCount = 0;
+            return;
+        }
+
+        chatMessages.innerHTML = '';
+
+        AppState.allMessages.forEach(msg => {
+            appendMessageElement(msg, false);
+        });
+
+        // Scroll to bottom
+        chatMessages.scrollTop = chatMessages.scrollHeight;
+        AppState.lastMessageCount = AppState.allMessages.length;
+    }
+
+    function appendMessage(msg) {
+        AppState.allMessages.push(msg);
+        appendMessageElement(msg, true);
+        AppState.lastMessageCount = AppState.allMessages.length;
+    }
+
+    function appendMessageElement(msg, animate) {
+        const chatMessages = document.getElementById('chatMessages');
+
+        if (!chatMessages) return;
+
+        // Remove empty chat message if it exists
+        const emptyChat = chatMessages.querySelector('.empty-chat');
+        if (emptyChat) {
+            emptyChat.remove();
+        }
+
+        const messageDiv = document.createElement('div');
+        messageDiv.className = 'message';
+        messageDiv.setAttribute('data-message-id', msg.id);
+
+        // Own message styling
+        if (msg.user_id === AppState.userId) {
+            messageDiv.className += ' own-message';
+        }
+
+        // Admin message styling
+        if (msg.is_admin) {
+            messageDiv.className += ' admin-message';
+        }
+
+        // Disable animation for initial load
+        if (!animate) {
+            messageDiv.style.animation = 'none';
+        }
+
+        // Create admin actions if user is admin
+        const adminActions = (AppState.isAdmin && msg.user_id !== AppState.userId) ?
+            `<div class="message-actions">
+                <button class="delete-btn" onclick="Chat.deleteMessage('${msg.id}')">Delete</button>
+                <button class="ban-btn" onclick="Chat.banUser('${msg.user_id}')">Ban</button>
+            </div>` : '';
+
+        // Create admin badge
+        const adminBadge = msg.is_admin ? '👑 ' : '';
+
+        messageDiv.innerHTML = `
+            <div class="message-header">
+                <span class="message-nickname${msg.is_admin ? ' admin' : ''}">${adminBadge}${msg.nickname}</span>
+                <span class="message-id">#${msg.user_id}</span>
+                <span class="message-time">${msg.time}</span>
+            </div>
+            <div class="message-text">${escapeHtml(msg.message)}</div>
+            ${adminActions}
+        `;
+
+        chatMessages.appendChild(messageDiv);
+
+        // Auto-scroll to bottom on new messages
+        if (animate) {
+            chatMessages.scrollTop = chatMessages.scrollHeight;
+        }
+    }
+
+    function removeMessageFromUI(messageId) {
+        const messageElement = document.querySelector(`[data-message-id="${messageId}"]`);
+        if (messageElement) {
+            messageElement.style.animation = 'slideOut 0.3s';
+            setTimeout(() => {
+                messageElement.remove();
+            }, 300);
+        }
+
+        // Remove from internal array
+        AppState.allMessages = AppState.allMessages.filter(msg => msg.id !== messageId);
+    }
+
+    function clearMessagesUI() {
+        const chatMessages = document.getElementById('chatMessages');
+        if (chatMessages) {
+            chatMessages.innerHTML = '<div class="system-message">Chat cleared by admin</div>';
+        }
+        AppState.allMessages = [];
+        AppState.lastMessageId = '';
+    }
+
+    // Utility function for HTML escaping
+    function escapeHtml(text) {
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    }
+
+    // Public API
+    window.Chat = {
+        initializeChat: initializeChat,
+        sendMessage: sendMessage,
+        deleteMessage: deleteMessage,
+        banUser: banUser,
+        clearChat: clearChat,
+        displayAllMessages: displayAllMessages,
+        appendMessage: appendMessage
+    };
+
+    // Initialize when DOM is ready and modules are loaded
+    document.addEventListener('DOMContentLoaded', function() {
+        // Small delay to ensure all modules are loaded
+        setTimeout(initializeChat, 100);
+    });
+
+    AppLogger.log('Chat module loaded');
+
+})();
diff --git a/index.php b/index.php
index 07aea2a..6f6725a 100644
--- a/index.php
+++ b/index.php
@@ -403,1242 +403,10 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action'])) {
     <div class="toast" id="toast"></div>
 
     <script src="https://vjs.zencdn.net/8.6.1/video.min.js"></script>
-    <script>
-        // Global variables
-        let player;
-        let nickname = localStorage.getItem('chatNickname') || '';
-        let userId = '';
-        let isAdmin = false;
-        let lastMessageId = '';
-        let allMessages = [];
-        let lastKnownMessageCount = 0;
-        let chatCollapsed = false;
-        let unreadCount = 0;
-        let soundEnabled = localStorage.getItem('soundEnabled') !== 'false';
-        let typingTimer;
-        let isTyping = false;
-
-        // Stream state variables
-        let streamMode = 'live'; // 'live' or 'placeholder'
-        let recoveryInterval;
-        let isRecovering = false;
-
-        // CENTRALIZED STATUS MANAGEMENT - ENSURES 100% ACCURACY
-        function updateStreamStatus(status, color) {
-            const badge = document.querySelector('.stream-badge');
-            if (badge) {
-                badge.textContent = status;
-                badge.style.background = color || 'var(--dodgers-red)'; // Default to live color
-                console.log(`📊 Stream status updated: ${status} (${color || 'red'})`);
-            }
-        }
-
-        // SYNC STATUS WITH STREAM MODE - PREVENTS INCORRECT DISPLAY
-        function syncStatusWithStreamMode() {
-            if (streamMode === 'placeholder') {
-                updateStreamStatus('PLACEHOLDER', '#17a2b8');
-            } else if (streamMode === 'live') {
-                updateStreamStatus('LIVE', 'var(--dodgers-red)');
-            } else {
-                updateStreamStatus('WAITING...', '#ffc107');
-            }
-        }
-
-        console.log('🔄 Initializing Dodgers Stream Player');
-        console.log('📊 Initial state: streamMode=live, errorRetryCount=0, isRecovering=false');
-        console.log('🎬 Starting Video.js initialization...');
-
-        // Initialize Video.js player
-        player = videojs('video-player', {
-			html5: {
-				vhs: {
-					overrideNative: true,
-					withCredentials: false,
-					// Add these for better resilience
-					handlePartialData: true,
-					smoothQualityChange: true,
-					allowSeeksWithinUnsafeLiveWindow: true,
-					handleManifestRedirects: true,
-					useBandwidthFromLocalStorage: true,
-					// Increase tolerance for errors
-					maxPlaylistRetries: 10,  // Retry playlist fetches
-					blacklistDuration: 5,    // Only blacklist for 5 seconds
-					bandwidth: 4194304       // Start with reasonable bandwidth estimate
-				}
-			},
-			liveui: true,
-			liveTracker: {
-				trackingThreshold: 30,    // Seconds behind live before seeking
-				liveTolerance: 15         // Seconds from live to be considered live
-			},
-			errorDisplay: false,  // We'll handle errors ourselves
-			responsive: false,
-			controlBar: {
-				volumePanel: {
-					inline: false
-				},
-				pictureInPictureToggle: true
-			}
-		});
-
-        // Track error state to prevent spam
-		let errorRetryCount = 0;
-		let isRetrying = false;
-		const MAX_RETRIES = 3; // Reduced for faster fallback
-
-		// AGGRESSIVE VOLUME ENFORCEMENT - BLOCKS VIDEO.JS FROM RESETTING VOLUME TO 100%
-		function enforceSavedVolume() {
-			const currentVolume = player.volume();
-			if (currentVolume === 1.0) {  // Video.js evil reset to 100% detected
-				const savedVolume = parseFloat(localStorage.getItem('playerVolume') || '0.3');
-				if (savedVolume !== 1.0) {
-					console.log('🚫 BLOCKED: Volume reset to 100% - forcing back to:', savedVolume);
-					player.volume(savedVolume);
-					return true; // Volume was forced back
-				}
-			}
-			return false; // Volume is OK
-		}
-
-		// TIMED VOLUME RESTORATION FUNCTION
-		function restoreVolume() {
-			const savedVolume = localStorage.getItem('playerVolume');
-			if (savedVolume) {
-				const volume = parseFloat(savedVolume);
-				console.log('🔊 RESTORING VOLUME TO:', volume);
-
-				// Force immediately, then reinforce with delay
-				player.volume(volume);
-				setTimeout(() => player.volume(volume), 100);
-				setTimeout(() => player.volume(volume), 500);
-
-				// Also reinforce on key events that Video.js might use to reset volume
-				setTimeout(() => {
-					['loadeddata', 'loadedmetadata', 'canplay'].forEach(event => {
-						player.one(event, () => {
-							setTimeout(() => {
-								const current = player.volume();
-								if (current === 1.0 || (current !== volume && !player.muted())) {
-									console.log('🔄 Reinforcing volume after', event + ':', volume);
-									player.volume(volume);
-								}
-							}, 50);
-						});
-					});
-				}, 100);
-			}
-		}
-
-		// Seperate function for HLS playback (used when stream is confirmed online)
-		function attemptHLSPlayback() {
-			console.log('🎬 Attempting HLS stream playback...');
-
-			// Try to play automatically
-			var playPromise = player.play();
-			if (playPromise !== undefined) {
-				playPromise.catch(function(error) {
-					console.log('Auto-play was prevented:', error);
-					showToast('Click play to start stream');
-				});
-			}
-		}
-
-		// Check stream status on page load
-		function checkInitialStreamStatus() {
-			return fetch('?api=stream_status')
-				.then(response => response.json())
-				.then(data => {
-					console.log('📡 Initial stream status check:', data);
-					return data.online === true; // Strict boolean check
-				})
-				.catch(error => {
-					console.log('❗ Initial stream status check failed:', error);
-					return false; // Assume offline if check fails
-				});
-		}
-
-		// Set default volume or restore saved volume
-		player.ready(function() {
-			console.log('Player is ready');
-
-			// IMMEDIATELY FIX ANY EVIL VIDEO.JS 100% VOLUME
-			if (player.volume() === 1.0) {
-				const savedVolume = localStorage.getItem('playerVolume') || '0.3';
-				player.volume(parseFloat(savedVolume));
-				console.log('🚫 FIXED: Initial 100% volume reset to:', savedVolume);
-			}
-
-			// Restore volume or set default
-			const savedVolume = localStorage.getItem('playerVolume');
-			if (savedVolume !== null) {
-				const volumeValue = parseFloat(savedVolume);
-				player.volume(volumeValue);
-				console.log('🔊 Restored saved volume:', volumeValue);
-			} else {
-				player.volume(0.3); // Default 30%
-				console.log('🔊 Set default volume: 0.3');
-			}
-
-			// AGGRESSIVE VOLUME MONITOR - BLOCKS 100% RESETS
-			player.on('volumechange', function() {
-				if (!enforceSavedVolume()) {
-					// User's intentional change - save it
-					if (!player.muted()) {
-						const newVolume = player.volume();
-						localStorage.setItem('playerVolume', newVolume);
-						console.log('💾 Saved volume setting:', newVolume);
-					}
-				}
-			});
-
-			// PROACTIVE STREAM STATUS CHECK - START WITH APPROPRIATE SOURCE
-			console.log('🔍 Checking stream status on page load...');
-			checkInitialStreamStatus().then(isOnline => {
-				if (!isOnline) {
-					console.log('🔄 Stream offline on load - switching to placeholder immediately');
-					switchToPlaceholder();
-				} else {
-					console.log('✅ Stream online on load - starting HLS playback');
-					// Stream is online, proceed with normal HLS loading
-					attemptHLSPlayback();
-					// Also start monitoring in case it goes offline soon
-					startStreamMonitoring();
-				}
-			});
-		});
-
-		// Start periodic stream monitoring
-		function startStreamMonitoring() {
-			if (!recoveryInterval) {
-				console.log('👁️ Starting stream monitoring...');
-				recoveryInterval = setInterval(() => {
-					if (streamMode !== 'placeholder') { // Only check if not already in placeholder mode
-						fetch('?api=stream_status')
-							.then(response => response.json())
-							.then(data => {
-								if (!data.online) {
-									console.log('⚠️ Stream went offline during playback - switching to placeholder');
-									switchToPlaceholder();
-								}
-							})
-							.catch(error => {
-								console.log('❗ Stream monitoring check failed:', error);
-							});
-					}
-				}, 10000); // Check every 10 seconds during normal operation
-			}
-		}
-
-		// Listen for VideoJS warnings to trigger fallback faster
-		player.on('warning', function(event) {
-			console.log('VideoJS warning:', event.detail);
-			// If we're getting playlist warnings and not already in recovery
-			if (!isRetrying && !isRecovering && streamMode === 'live') {
-				console.log('Playlist warning detected, increasing error count');
-				errorRetryCount += 1; // Full error increment per warning
-				console.log('Warning count now:', errorRetryCount);
-				if (errorRetryCount >= 3) { // Trigger after 3 consecutive warnings
-					console.log('Threshold reached, switching to placeholder');
-					switchToPlaceholder();
-				}
-			}
-		});
-
-		// Enhanced error handling with placeholder fallback
-		player.on('error', function() {
-			var error = player.error();
-			console.log('Player error:', error);
-
-			// Don't retry if we're already retrying or in placeholder mode
-			if (isRetrying || streamMode === 'placeholder') return;
-
-			// Handle different error types
-			if (error && (error.code === 2 || error.code === 4)) {
-				// Network errors (2) or media errors (4) - these are recoverable
-
-				if (errorRetryCount < MAX_RETRIES) {
-					isRetrying = true;
-					errorRetryCount++;
-
-					console.log(`Attempting recovery (${errorRetryCount}/${MAX_RETRIES})...`);
-
-					// Update UI to show attempting recovery
-					updateStreamStatus('RECONNECTING...', '#ffc107');
-
-					// Clear the error and attempt to recover
-					setTimeout(() => {
-						player.error(null);  // Clear error state
-
-						// For segment/playlist errors, just continue playing
-						// The player will automatically try to fetch new segments
-						if (player.paused()) {
-							player.play().catch(e => console.log('Play attempt failed:', e));
-						}
-
-						isRetrying = false;
-
-						// If still having issues after a bit, try a soft reload
-						setTimeout(() => {
-							if (player.error()) {
-								console.log('Soft reloading source...');
-								const currentTime = player.currentTime();
-								player.src(player.currentSrc());
-								player.play().catch(e => console.log('Play after reload failed:', e));
-							}
-						}, 3000);
-
-					}, 1000 * Math.min(errorRetryCount, 3)); // Exponential backoff, max 3 seconds
-
-				} else {
-					// Max retries exceeded - switch to placeholder
-					console.error('Max retries exceeded, switching to placeholder video');
-					switchToPlaceholder();
-				}
-			} else if (error && error.code === 3) {
-				// Decode error - might need different handling
-				console.error('Decode error, switching to placeholder:', error);
-				switchToPlaceholder();
-			}
-		});
-
-		// Reset error count on successful playback
-		player.on('loadeddata', function() {
-			errorRetryCount = 0;  // Reset retry count on success
-			isRetrying = false;
-			if (streamMode === 'live') {
-				updateStreamStatus('LIVE', 'var(--dodgers-red)');
-			}
-		});
-
-		// Add playing event to ensure we show correct status
-		player.on('playing', function() {
-			errorRetryCount = 0;  // Reset retry count
-			isRetrying = false;
-			if (streamMode === 'live') {
-				updateStreamStatus('LIVE', 'var(--dodgers-red)');
-			}
-		});
-
-		// Handle stalling (buffering)
-		player.on('waiting', function() {
-			console.log('Player is buffering...');
-			// Only show buffering state if we're not in error recovery
-			if (!isRetrying && errorRetryCount === 0 && streamMode === 'live') {
-				updateStreamStatus('BUFFERING...', '#ffc107');
-			}
-		});
-
-		// Monitor for extended stalls and reload stream
-		let stallTimeout;
-		let waitingStartTime = null;
-		let offlineConfirmCount = 0;
-
-		player.on('waiting', function() {
-			waitingStartTime = Date.now();
-			offlineConfirmCount = 0;
-			console.log('⏸️ Player entered buffering state at:', new Date(waitingStartTime).toLocaleTimeString());
-
-			// Do multiple API status checks to confirm stream is actually offline
-			// First check is immediate, then 2 more over 3 seconds to confirm
-			function checkStreamStatus(attempt = 1, maxAttempts = 5) {
-				console.log(`📡 Stream status check ${attempt}/${maxAttempts}...`);
-
-				fetch('?api=stream_status')
-					.then(response => response.json())
-					.then(data => {
-						console.log(`📡 Check ${attempt}:`, data);
-
-						if (!data.online) {
-							offlineConfirmCount++;
-							console.log(`⚠️ Confirmed offline - Attempts: ${offlineConfirmCount}/${maxAttempts}`);
-
-							if (offlineConfirmCount >= 2 || attempt >= maxAttempts) {
-								// Got 2+ offline confirmations or max attempts - definitely offline
-								console.log('❌ Stream confirmed offline after multiple checks - switching to placeholder');
-								switchToPlaceholder();
-								return;
-							}
-						} else {
-							// Stream still shows online - reset offline count
-							offlineConfirmCount = 0;
-							console.log('✅ Stream still shows online - normal buffering');
-						}
-
-						// If not confirmed offline yet and attempts remain, check again in 1.5s
-						if (offlineConfirmCount < 2 && attempt < maxAttempts) {
-							setTimeout(() => checkStreamStatus(attempt + 1, maxAttempts), 1500);
-						} else if (offlineConfirmCount < 2 && attempt >= maxAttempts) {
-							// All attempts done and stream still shows online - set long buffer timeout
-							console.log('🌟 Stream appears online after multiple checks - normal buffering');
-							if (stallTimeout) clearTimeout(stallTimeout);
-							stallTimeout = setTimeout(() => {
-								const stallDuration = Date.now() - waitingStartTime;
-								console.log(`🔄 LONG STALL DETECTED: ${stallDuration/1000} seconds - checking if still buffered...`);
-
-								// Double-check if we're still waiting after this timeout
-								if (player.paused() || player.currentTime() === 0 && waitingStartTime) {
-									// Still stalled - attempt recovery
-									console.log('✅ Still stalled after 3 minutes - attempting recovery...');
-									player.error(null); // Clear any error state
-									player.pause(); // Stop current playback
-									player.reset(); // Reset player state completely
-									player.src({
-										src: '?proxy=stream',
-										type: 'application/x-mpegURL'
-									}); // Use fresh URL instead of currentSrc()
-									player.load();
-
-									// Restore volume after reset, but before play
-									const savedVolume = localStorage.getItem('playerVolume');
-									const targetVolume = savedVolume !== null ? parseFloat(savedVolume) : 0.3;
-									player.volume(targetVolume);
-									console.log('🔊 Volume restored during recovery to:', targetVolume);
-
-									player.play().then(() => {
-										console.log('✅ Stream recovery successful after long stall');
-									}).catch(e => {
-										console.log('❌ Recovery failed, might switch to placeholder');
-									});
-								} else {
-									console.log('✨ Stall resolved - no action needed');
-								}
-							}, 180000); // 3 minutes for confirmed online streams
-						}
-
-					})
-					.catch(apiError => {
-						console.log('❗ API check failed:', apiError);
-						// If API fails, be conservative - assume online and set long timeout
-						if (stallTimeout) clearTimeout(stallTimeout);
-						stallTimeout = setTimeout(() => {
-							console.log('🔄 Conservative timeout reached (API failed) - attempting recovery...');
-							player.error(null);
-							player.src({
-								src: '?proxy=stream',
-								type: 'application/x-mpegURL'
-							});
-							player.load();
-							player.play().catch(e => console.log('Recover play failed:', e));
-						}, 60000); // 1 minute when API fails
-					});
-			}
-
-			// Start the multi-check process
-			checkStreamStatus();
-		});
-
-		// Cancel stall timeout when playback resumes
-		player.on('playing', function() {
-			if (waitingStartTime) {
-				const totalStallTime = Date.now() - waitingStartTime;
-				if (totalStallTime > 5000) { // Only log significant stalls
-					console.log(`✨ Playback resumed after ${totalStallTime/1000}s stall - clearing timeouts`);
-				}
-				waitingStartTime = null;
-			}
-			if (stallTimeout) {
-				clearTimeout(stallTimeout);
-				stallTimeout = null;
-			}
-		});
-
-		// Disable right-click context menu on video player
-		document.getElementById('video-player').addEventListener('contextmenu', function(e) {
-			e.preventDefault();
-			return false;
-		});
-
-		// Also disable context menu on the video element itself
-		player.ready(function() {
-			const videoElement = player.el().querySelector('video');
-			if (videoElement) {
-				videoElement.addEventListener('contextmenu', function(e) {
-					e.preventDefault();
-					return false;
-				});
-			}
-		});
-
-		// Optional: Add a manual recovery button for users
-		function manualRecovery() {
-			console.log('🔄 Manual recovery triggered by user');
-			errorRetryCount = 0;
-			isRetrying = false;
-
-			showToast('🔄 Manual stream refresh triggered');
-
-			// Force hard reset FIRST (clears all state)
-			player.reset();
-
-			// Clear any errors after reset
-			player.error(null);
-
-			// Now set fresh proxy URL
-			player.src({
-				src: '?proxy=stream',
-				type: 'application/x-mpegURL'
-			});
-
-			// Load and play
-			player.load();
-
-			setTimeout(() => {
-				player.play().catch(e => console.log('Manual recovery play failed:', e));
-			}, 500); // Short delay to ensure load completes
-		}
-        
-        // Chat functionality
-        function initializeChat() {
-            // Get user ID on load
-            fetch('', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/x-www-form-urlencoded',
-                },
-                body: 'action=get_user_id'
-            })
-            .then(response => response.json())
-            .then(data => {
-                if (data.success) {
-                    userId = data.user_id;
-                    isAdmin = data.is_admin || false;
-                    
-                    const userIdElement = document.getElementById('userId');
-                    userIdElement.textContent = '#' + userId;
-                    
-                    if (isAdmin) {
-                        userIdElement.classList.add('admin');
-                        userIdElement.textContent = '👑 #' + userId;
-                        document.getElementById('adminControls').style.display = 'flex';
-                        showToast('Admin mode activated');
-                    }
-                }
-            });
-            
-            if (nickname) {
-                document.getElementById('nickname').value = nickname;
-            }
-            
-            document.getElementById('nickname').addEventListener('change', function() {
-                nickname = this.value.trim();
-                localStorage.setItem('chatNickname', nickname);
-            });
-            
-            document.getElementById('messageInput').addEventListener('keypress', function(e) {
-                if (e.key === 'Enter' && !e.shiftKey) {
-                    e.preventDefault();
-                    sendMessage();
-                }
-            });
-            
-            // Typing indicator
-            document.getElementById('messageInput').addEventListener('input', function() {
-                if (this.value.length > 0 && !isTyping) {
-                    isTyping = true;
-                    // In a real implementation, you'd send this to the server
-                }
-                
-                clearTimeout(typingTimer);
-                typingTimer = setTimeout(() => {
-                    isTyping = false;
-                }, 1000);
-            });
-        }
-        
-        function sendMessage() {
-            const messageInput = document.getElementById('messageInput');
-            const nicknameInput = document.getElementById('nickname');
-            const message = messageInput.value.trim();
-            nickname = nicknameInput.value.trim();
-            
-            if (!nickname) {
-                nicknameInput.style.borderColor = 'var(--dodgers-red)';
-                nicknameInput.focus();
-                showToast('Please enter a nickname');
-                setTimeout(() => {
-                    nicknameInput.style.borderColor = '#e0e0e0';
-                }, 2000);
-                return;
-            }
-            
-            if (!message) {
-                return;
-            }
-            
-            // Send message via AJAX
-            fetch('', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/x-www-form-urlencoded',
-                },
-                body: `action=send&nickname=${encodeURIComponent(nickname)}&message=${encodeURIComponent(message)}`
-            })
-            .then(response => response.json())
-            .then(data => {
-                if (data.success) {
-                    messageInput.value = '';
-                    // Add message immediately to avoid delay
-                    appendMessage(data.message);
-                } else if (data.error) {
-                    showToast(data.error);
-                }
-            })
-            .catch(error => {
-                console.error('Error sending message:', error);
-                updateConnectionStatus(false);
-            });
-        }
-        
-        function deleteMessage(messageId) {
-            if (!isAdmin) return;
-            
-            fetch('', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/x-www-form-urlencoded',
-                },
-                body: `action=delete_message&message_id=${encodeURIComponent(messageId)}`
-            })
-            .then(response => response.json())
-            .then(data => {
-                if (data.success) {
-                    // Remove message from DOM
-                    const msgElement = document.querySelector(`[data-message-id="${messageId}"]`);
-                    if (msgElement) {
-                        msgElement.style.animation = 'slideOut 0.3s';
-                        setTimeout(() => msgElement.remove(), 300);
-                    }
-                    
-                    // Remove message from allMessages array to prevent it from reappearing
-                    allMessages = allMessages.filter(msg => msg.id !== messageId);
-                    
-                    showToast('Message deleted');
-                }
-            });
-        }
-        
-        function banUser(userId) {
-            if (!isAdmin) return;
-            
-            if (confirm('Ban this user from chat?')) {
-                fetch('', {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/x-www-form-urlencoded',
-                    },
-                    body: `action=ban_user&user_id=${encodeURIComponent(userId)}`
-                })
-                .then(response => response.json())
-                .then(data => {
-                    if (data.success) {
-                        showToast('User banned');
-                    }
-                });
-            }
-        }
-        
-        function clearChat() {
-            if (!isAdmin) return;
-            
-            if (confirm('Clear all chat messages?')) {
-                fetch('', {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/x-www-form-urlencoded',
-                    },
-                    body: 'action=clear_chat'
-                })
-                .then(response => response.json())
-                .then(data => {
-                    if (data.success) {
-                        // Clear local messages and reset state
-                        allMessages = [];
-                        lastMessageId = '';
-                        document.getElementById('chatMessages').innerHTML = '<div class="system-message">Chat cleared by admin</div>';
-                        showToast('Chat cleared');
-                        
-                        // Force all users to refresh their chat by fetching all messages again
-                        setTimeout(() => {
-                            fetchMessages();
-                        }, 500);
-                    }
-                });
-            }
-        }
-        
-        function fetchMessages() {
-            fetch('', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/x-www-form-urlencoded',
-                },
-                body: `action=fetch&last_id=${encodeURIComponent(lastMessageId)}`
-            })
-            .then(response => response.json())
-            .then(data => {
-                if (data.success) {
-                    // Update viewer count
-                    if (data.viewer_count !== undefined) {
-                        updateViewerCount(data.viewer_count);
-                    }
-                    
-                    const serverMessageCount = data.message_count || 0;
-                    
-                    if (data.all_messages !== null) {
-                        // Initial load or forced refresh
-                        allMessages = data.all_messages;
-                        lastKnownMessageCount = serverMessageCount;
-                        displayAllMessages();
-                        
-                        if (serverMessageCount === 0 && lastKnownMessageCount > 0) {
-                            // Chat was cleared
-                            document.getElementById('chatMessages').innerHTML = '<div class="system-message">Chat was cleared by admin</div>';
-                        }
-                    } else {
-                        // Check if message count decreased (admin deleted messages or cleared chat)
-                        if (serverMessageCount < lastKnownMessageCount) {
-                            // Something was deleted, refresh all messages
-                            lastMessageId = ''; // Reset to fetch all messages
-                            fetchMessages();
-                            return;
-                        }
-                        
-                        // Normal case: append new messages
-                        if (data.messages && data.messages.length > 0) {
-                            data.messages.forEach(msg => {
-                                appendMessage(msg);
-                                // Show notification if chat is collapsed and message is not from current user
-                                if (chatCollapsed && msg.user_id !== userId) {
-                                    unreadCount++;
-                                    updateNotificationBadge();
-                                    playNotificationSound();
-                                }
-                            });
-                        }
-                        
-                        lastKnownMessageCount = serverMessageCount;
-                    }
-                    updateConnectionStatus(true);
-                }
-            })
-            .catch(error => {
-                console.error('Error fetching messages:', error);
-                updateConnectionStatus(false);
-            });
-        }
-        
-        function sendHeartbeat() {
-            const nicknameValue = document.getElementById('nickname').value || 'Anonymous';
-            
-            fetch('', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/x-www-form-urlencoded',
-                },
-                body: `action=heartbeat&nickname=${encodeURIComponent(nicknameValue)}`
-            })
-            .then(response => response.json())
-            .then(data => {
-                if (data.success && data.viewer_count !== undefined) {
-                    updateViewerCount(data.viewer_count);
-                }
-            })
-            .catch(error => {
-                console.error('Error sending heartbeat:', error);
-            });
-        }
-        
-        function updateViewerCount(count) {
-            const viewerElement = document.getElementById('viewerCount');
-            viewerElement.textContent = count + (count === 1 ? ' viewer' : ' viewers');
-        }
-        
-        function displayAllMessages() {
-            const chatMessages = document.getElementById('chatMessages');
-            
-            if (allMessages.length === 0) {
-                chatMessages.innerHTML = '<div class="empty-chat">No messages yet. Be the first to say hello! 👋</div>';
-                lastKnownMessageCount = 0;
-                return;
-            }
-            
-            chatMessages.innerHTML = '';
-            allMessages.forEach(msg => {
-                appendMessageElement(msg, false);
-            });
-            
-            if (allMessages.length > 0) {
-                lastMessageId = allMessages[allMessages.length - 1].id;
-                chatMessages.scrollTop = chatMessages.scrollHeight;
-            }
-            lastKnownMessageCount = allMessages.length;
-        }
-        
-        function appendMessage(msg) {
-            allMessages.push(msg);
-            appendMessageElement(msg, true);
-            lastMessageId = msg.id;
-        }
-        
-        function appendMessageElement(msg, animate) {
-            const chatMessages = document.getElementById('chatMessages');
-            
-            // Remove empty chat message if it exists
-            const emptyChat = chatMessages.querySelector('.empty-chat');
-            if (emptyChat) {
-                emptyChat.remove();
-            }
-            
-            const messageDiv = document.createElement('div');
-            messageDiv.className = 'message';
-            messageDiv.setAttribute('data-message-id', msg.id);
-            
-            if (msg.user_id === userId) {
-                messageDiv.className += ' own-message';
-            }
-            if (msg.is_admin) {
-                messageDiv.className += ' admin-message';
-            }
-            if (!animate) {
-                messageDiv.style.animation = 'none';
-            }
-            
-            const adminActions = isAdmin && msg.user_id !== userId ? `
-                <div class="message-actions">
-                    <button class="delete-btn" onclick="deleteMessage('${msg.id}')">Delete</button>
-                    <button class="ban-btn" onclick="banUser('${msg.user_id}')">Ban</button>
-                </div>
-            ` : '';
-            
-            const adminBadge = msg.is_admin ? '👑 ' : '';
-            
-            messageDiv.innerHTML = `
-                <div class="message-header">
-                    <span class="message-nickname${msg.is_admin ? ' admin' : ''}">${adminBadge}${msg.nickname}</span>
-                    <span class="message-id">#${msg.user_id}</span>
-                    <span class="message-time">${msg.time}</span>
-                </div>
-                <div class="message-text">${msg.message}</div>
-                ${adminActions}
-            `;
-            
-            chatMessages.appendChild(messageDiv);
-            
-            // Auto-scroll to bottom
-            if (animate) {
-                chatMessages.scrollTop = chatMessages.scrollHeight;
-            }
-        }
-        
-        function updateConnectionStatus(online) {
-            const statusDot = document.getElementById('statusDot');
-            const statusText = document.getElementById('statusText');
-            
-            if (online) {
-                statusDot.classList.remove('offline');
-                statusText.textContent = 'Connected';
-            } else {
-                statusDot.classList.add('offline');
-                statusText.textContent = 'Reconnecting...';
-            }
-        }
-        
-        function toggleChat() {
-            const chatSection = document.getElementById('chatSection');
-            const videoSection = document.getElementById('videoSection');
-            const toggleBtn = document.getElementById('chatToggleText');
-            
-            chatCollapsed = !chatCollapsed;
-            
-            if (chatCollapsed) {
-                chatSection.classList.add('collapsed');
-                videoSection.classList.add('expanded');
-                toggleBtn.textContent = 'Show Chat';
-            } else {
-                chatSection.classList.remove('collapsed');
-                videoSection.classList.remove('expanded');
-                toggleBtn.textContent = 'Hide Chat';
-                // Clear unread count
-                unreadCount = 0;
-                updateNotificationBadge();
-            }
-        }
-        
-        function updateNotificationBadge() {
-            const badge = document.getElementById('notificationBadge');
-            
-            if (unreadCount > 0) {
-                badge.textContent = unreadCount > 99 ? '99+' : unreadCount;
-                badge.classList.add('show');
-            } else {
-                badge.classList.remove('show');
-            }
-        }
-        
-        function playNotificationSound() {
-            if (soundEnabled && document.hidden) {
-                // Create a simple beep sound using Web Audio API
-                try {
-                    const audioContext = new (window.AudioContext || window.webkitAudioContext)();
-                    const oscillator = audioContext.createOscillator();
-                    const gainNode = audioContext.createGain();
-                    
-                    oscillator.connect(gainNode);
-                    gainNode.connect(audioContext.destination);
-                    
-                    oscillator.frequency.value = 800;
-                    oscillator.type = 'sine';
-                    gainNode.gain.value = 0.1;
-                    
-                    oscillator.start(audioContext.currentTime);
-                    oscillator.stop(audioContext.currentTime + 0.1);
-                } catch(e) {
-                    console.log('Audio notification failed:', e);
-                }
-            }
-        }
-        
-        function showToast(message) {
-            const toast = document.getElementById('toast');
-            toast.textContent = message;
-            toast.classList.add('show');
-
-            setTimeout(() => {
-                toast.classList.remove('show');
-            }, 3000);
-        }
-
-        // Fast recovery checks when in placeholder mode (every 2 seconds for 5 checks)
-        let recoveryCheckCount = 0;
-        let recoveryTimeout;
-
-        function startRecoveryChecks() {
-            console.log('🔍 Starting fast recovery checks (every 2s for 5 checks = 10s total)');
-            recoveryCheckCount = 0;
-
-            // Clear any existing recovery timeout
-            if (recoveryTimeout) {
-                clearTimeout(recoveryTimeout);
-            }
-
-            function checkRecovery() {
-                if (streamMode !== 'placeholder' || recoveryCheckCount >= 5) {
-                    if (recoveryCheckCount >= 5) {
-                        console.log('⏹️ Fast recovery checks complete - stream still offline, staying in placeholder mode');
-                    }
-                    return;
-                }
-
-                recoveryCheckCount++;
-                console.log(`🔍 Recovery check ${recoveryCheckCount}/5...`);
-
-                fetch('?api=stream_status')
-                    .then(response => response.json())
-                    .then(data => {
-                        console.log(`📡 Recovery check ${recoveryCheckCount}:`, data);
-                        if (data.online && streamMode === 'placeholder') {
-                            console.log('✅ Stream back online during recovery check - switching back');
-                            isRecovering = true;
-                            switchToLive();
-                        } else {
-                            // Schedule next check in 2 seconds (unless we've reached the limit)
-                            if (recoveryCheckCount < 5 && streamMode === 'placeholder') {
-                                recoveryTimeout = setTimeout(checkRecovery, 2000);
-                            }
-                        }
-                    })
-                    .catch(error => {
-                        console.log(`❗ Recovery check ${recoveryCheckCount} failed:`, error);
-                        // Still schedule next check even on failure
-                        if (recoveryCheckCount < 5 && streamMode === 'placeholder') {
-                            recoveryTimeout = setTimeout(checkRecovery, 2000);
-                        }
-                    });
-            }
-
-            // Start first check immediately
-            checkRecovery();
-        }
-
-        // Stream management functions
-        function switchToPlaceholder() {
-            if (streamMode === 'placeholder') {
-                console.log('⚠️ Already in placeholder mode, ignoring switch request');
-                return;
-            }
-
-            console.log('🔄 START: Switching to placeholder video');
-            console.log('📊 State before switch - streamMode:', streamMode, 'errorRetryCount:', errorRetryCount, 'isRecovering:', isRecovering);
-            streamMode = 'placeholder';
-            console.log('✅ State after switch - streamMode:', streamMode);
-
-            // Clear any existing recovery interval/timeout
-            if (recoveryInterval) {
-                clearInterval(recoveryInterval);
-            }
-            if (recoveryTimeout) {
-                clearTimeout(recoveryTimeout);
-            }
-
-            // Update UI first to give immediate feedback
-            updateStreamStatus('SWITCHING...', '#ffc107');
-
-            try {
-                // Stop playback and reset to clear all HLS state
-                player.pause();
-                player.reset();
-
-                // ENFORCE VOLUME AFTER RESET
-                restoreVolume();
-
-                // Wait longer for cleanup
-                setTimeout(() => {
-                    // Switch to placeholder MP4
-                    player.src({
-                        src: 'placeholder.mp4',
-                        type: 'video/mp4'
-                    });
-
-                    player.load();
-                    // ENFORCE VOLUME AFTER LOAD
-                    setTimeout(() => restoreVolume(), 200);
-
-                    // Start playing after load
-                    player.play().then(() => {
-                        console.log('Placeholder video started successfully');
-                        // Restore volume after switching
-                        const savedVolume = localStorage.getItem('playerVolume');
-                        const targetVolume = savedVolume !== null ? parseFloat(savedVolume) : 0.3;
-                        player.volume(targetVolume);
-                        console.log('🔊 Volume restored to:', targetVolume, '(saved:', savedVolume !== null, ')');
-                        // Update UI to show placeholder mode
-                        updateStreamStatus('PLACEHOLDER', '#17a2b8');
-                        showToast('Stream offline - showing placeholder video');
-
-                        // Start fast recovery checks (every 2 seconds for 5 checks = 10 seconds total)
-                        startRecoveryChecks();
-                    }).catch(e => {
-                        console.log('Placeholder play failed:', e);
-                        // Still update UI even if play fails
-                        updateStreamStatus('PLACEHOLDER', '#17a2b8');
-                        showToast('Stream offline - showing placeholder video');
-
-                        // Start fast recovery checks even if play failed
-                        startRecoveryChecks();
-                    });
-
-                }, 1000); // Give HLS more time to clean up
-
-            } catch (e) {
-                console.log('Error switching to placeholder:', e);
-                // Fallback approach
-                try {
-                    player.src({
-                        src: 'placeholder.mp4',
-                        type: 'video/mp4'
-                    });
-                    player.load();
-                    startRecoveryChecks();
-                } catch (e2) {
-                    console.log('Fallback also failed:', e2);
-                    startRecoveryChecks();
-                }
-            }
-        }
-
-        function switchToLive() {
-            if (streamMode === 'live') {
-                console.log('⚠️ Already in live mode, ignoring switch request');
-                return;
-            }
-
-            console.log('🔄 START: Switching back to live stream');
-            console.log('📊 State before switch - streamMode:', streamMode, 'isRecovering:', isRecovering);
-            streamMode = 'live';
-            isRecovering = false;
-            console.log('✅ State after switch - streamMode:', streamMode, 'isRecovering:', isRecovering);
-
-            // Clear recovery interval
-            if (recoveryInterval) {
-                clearInterval(recoveryInterval);
-                recoveryInterval = null;
-            }
-
-            // Update UI first
-            updateStreamStatus('SWITCHING...', '#ffc107');
-
-            try {
-                // Stop current playback and reset player state
-                player.pause();
-                player.reset();
-
-                // ENFORCE VOLUME AFTER RESET
-                restoreVolume();
-
-                // Wait for cleanup
-                setTimeout(() => {
-                    // Switch back to HLS stream
-                    player.src({
-                        src: '?proxy=stream',
-                        type: 'application/x-mpegURL'
-                    });
-
-                    // Reset error state
-                    errorRetryCount = 0;
-                    isRetrying = false;
-
-                    player.load();
-                    // ENFORCE VOLUME AFTER LOAD
-                    setTimeout(() => restoreVolume(), 200);
-
-                    player.play().then(() => {
-                        console.log('Live stream started successfully');
-                        // Restore volume after switching
-                        const savedVolume = localStorage.getItem('playerVolume');
-                        const targetVolume = savedVolume !== null ? parseFloat(savedVolume) : 0.3;
-                        player.volume(targetVolume);
-                        console.log('🔊 Volume restored to:', targetVolume, '(saved:', savedVolume !== null, ')');
-                        // Update UI to show reconnecting then live
-                        updateStreamStatus('RECONNECTING...', '#ffc107');
-                        showToast('Stream back online - switching to live');
-
-                        // After a moment, show live status
-                        setTimeout(() => {
-                            if (streamMode === 'live') {
-                                updateStreamStatus('LIVE', 'var(--dodgers-red)');
-                            }
-                        }, 2000);
-                    }).catch(e => {
-                        console.log('Live stream play failed:', e);
-                        // Restore volume after switching even if play fails
-                        const savedVolume = localStorage.getItem('playerVolume');
-                        const targetVolume = savedVolume !== null ? parseFloat(savedVolume) : 0.3;
-                        player.volume(targetVolume);
-                        console.log('🔊 Volume restored to:', targetVolume, '(saved:', savedVolume !== null, ')');
-                        // Still show as live even if initial play fails
-                        updateStreamStatus('LIVE', 'var(--dodgers-red)');
-                        showToast('Stream back online - switching to live');
-                    });
-
-                }, 1000); // Give more time for cleanup
-
-            } catch (e) {
-                console.log('Error switching to live:', e);
-                try {
-                    player.src({
-                        src: '?proxy=stream',
-                        type: 'application/x-mpegURL'
-                    });
-                    player.load();
-                } catch (e2) {
-                    console.log('Fallback also failed:', e2);
-                }
-            }
-        }
-
-        function checkStreamRecovery() {
-            if (isRecovering) {
-                console.log('⏳ Already recovering, skipping recovery check');
-                return;
-            }
-
-            console.log('🔍 Checking stream recovery status...');
-            console.log('📊 Current state - streamMode:', streamMode, 'isRecovering:', isRecovering);
-
-            fetch('?api=stream_status')
-                .then(response => response.json())
-                .then(data => {
-                    console.log('📡 Stream status response:', data);
-                    if (data.online && streamMode === 'placeholder') {
-                        console.log('✅ Live stream detected, switching back');
-                        isRecovering = true;
-                        console.log('🔄 Set isRecovering=true, will switch to live in 1 second');
-
-                        // Give it a moment then switch back
-                        setTimeout(() => {
-                            console.log('🚀 Executing switch to live stream');
-                            switchToLive();
-                        }, 1000);
-                    } else if (data.online) {
-                        console.log('ℹ️ Stream is online but not in placeholder mode');
-                    } else {
-                        console.log('❌ Stream is still offline, will check again in 5 seconds');
-                    }
-                })
-                .catch(error => {
-                    console.log('❗ Error checking stream status:', error);
-                });
-        }
-
-        function toggleFullscreen() {
-            if (player.isFullscreen()) {
-                player.exitFullscreen();
-                document.getElementById('fullscreenIcon').textContent = '⛶';
-            } else {
-                player.requestFullscreen();
-                document.getElementById('fullscreenIcon').textContent = '⛶';
-            }
-        }
-        
-        function togglePictureInPicture() {
-            if (document.pictureInPictureElement) {
-                document.exitPictureInPicture();
-            } else {
-                const video = document.getElementById('video-player');
-                if (video.requestPictureInPicture) {
-                    video.requestPictureInPicture();
-                }
-            }
-        }
-
-        // Initialize
-        initializeChat();
-
-        // Poll for new messages every 2 seconds
-        setInterval(fetchMessages, 2000);
-
-        // Send heartbeat every 5 seconds
-        setInterval(sendHeartbeat, 5000);
-
-        // Initial fetch
-        fetchMessages();
-        sendHeartbeat();
-
-        // Handle window resize
-        window.addEventListener('resize', function() {
-            if (window.innerWidth <= 768 && !chatCollapsed) {
-                // Auto-collapse chat on mobile for better video viewing
-                toggleChat();
-            }
-        });
-
-        // Keyboard shortcuts
-        document.addEventListener('keydown', function(e) {
-            // Toggle chat with 'C' key
-            if (e.key === 'c' && !e.target.matches('input')) {
-                toggleChat();
-            }
-            // Toggle fullscreen with 'F' key
-            if (e.key === 'f' && !e.target.matches('input')) {
-                toggleFullscreen();
-            }
-            // Focus chat with '/' key
-            if (e.key === '/' && !e.target.matches('input')) {
-                e.preventDefault();
-                document.getElementById('messageInput').focus();
-            }
-        });
-
-        // Page visibility API for notifications
-        document.addEventListener('visibilitychange', function() {
-            if (!document.hidden) {
-                // Clear unread when page becomes visible
-                if (!chatCollapsed) {
-                    unreadCount = 0;
-                    updateNotificationBadge();
-                }
-            }
-        });
-    </script>
+    <script src="app.js"></script>
+    <script src="api.js"></script>
+    <script src="ui-controls.js"></script>
+    <script src="chat.js"></script>
+    <script src="video-player.js"></script>
 </body>
 </html>
diff --git a/ui-controls.js b/ui-controls.js
new file mode 100644
index 0000000..9161393
--- /dev/null
+++ b/ui-controls.js
@@ -0,0 +1,282 @@
+// UI Controls Module
+// Handles UI toggle functions, keyboard shortcuts, notifications, and DOM utilities
+
+(function() {
+    'use strict';
+
+    AppModules.require('api');
+    AppModules.register('ui-controls');
+
+    // Toast notification system
+    function showToast(message, duration = AppConfig.ui.toastDuration) {
+        const toast = document.getElementById('toast');
+        if (!toast) return;
+
+        toast.textContent = message;
+        toast.classList.add('show');
+
+        if (duration > 0) {
+            setTimeout(() => {
+                toast.classList.remove('show');
+            }, duration);
+        }
+    }
+
+    function hideToast() {
+        const toast = document.getElementById('toast');
+        if (toast) {
+            toast.classList.remove('show');
+        }
+    }
+
+    // Notification badge management
+    function updateNotificationBadge() {
+        const badge = document.getElementById('notificationBadge');
+
+        if (badge) {
+            if (AppState.unreadCount > 0) {
+                badge.textContent = AppState.unreadCount > 99 ? '99+' : AppState.unreadCount;
+                badge.classList.add('show');
+            } else {
+                badge.classList.remove('show');
+            }
+        }
+    }
+
+    // Chat toggle functionality
+    function toggleChat() {
+        const chatSection = document.getElementById('chatSection');
+        const videoSection = document.getElementById('videoSection');
+        const toggleBtn = document.getElementById('chatToggleText');
+
+        if (!chatSection || !videoSection || !toggleBtn) return;
+
+        AppState.chatCollapsed = !AppState.chatCollapsed;
+
+        if (AppState.chatCollapsed) {
+            chatSection.classList.add('collapsed');
+            videoSection.classList.add('expanded');
+            toggleBtn.textContent = 'Show Chat';
+        } else {
+            chatSection.classList.remove('collapsed');
+            videoSection.classList.remove('expanded');
+            toggleBtn.textContent = 'Hide Chat';
+            // Clear unread count when reopening
+            AppState.unreadCount = 0;
+            updateNotificationBadge();
+        }
+    }
+
+    // Viewer count update
+    function updateViewerCount(count) {
+        const viewerElement = document.getElementById('viewerCount');
+        if (viewerElement) {
+            viewerElement.textContent = count + (count === 1 ? ' viewer' : ' viewers');
+        }
+    }
+
+    // Connection status dot
+    function updateConnectionStatus(online) {
+        const statusDot = document.getElementById('statusDot');
+        const statusText = document.getElementById('statusText');
+
+        if (statusDot && statusText) {
+            if (online) {
+                statusDot.classList.remove('offline');
+                statusText.textContent = 'Connected';
+            } else {
+                statusDot.classList.add('offline');
+                statusText.textContent = 'Reconnecting...';
+            }
+        }
+    }
+
+    // Keyboard shortcuts handler
+    function handleKeyboardShortcuts(event) {
+        // Skip if typing in input field
+        if (event.target.matches('input, textarea')) {
+            return;
+        }
+
+        switch (event.key) {
+            case 'c':
+            case 'C':
+                // Toggle chat
+                event.preventDefault();
+                toggleChat();
+                break;
+            case 'f':
+            case 'F':
+                // Toggle fullscreen
+                event.preventDefault();
+                toggleFullscreen();
+                break;
+            case '/':
+                // Focus chat input
+                event.preventDefault();
+                const messageInput = document.getElementById('messageInput');
+                if (messageInput) {
+                    messageInput.focus();
+                }
+                break;
+            case 'p':
+            case 'P':
+                // Toggle picture-in-picture
+                event.preventDefault();
+                togglePictureInPicture();
+                break;
+        }
+    }
+
+    // Fullscreen functionality
+    function toggleFullscreen() {
+        if (!AppState.player) return;
+
+        if (AppState.player.isFullscreen()) {
+            AppState.player.exitFullscreen();
+        } else {
+            AppState.player.requestFullscreen();
+        }
+    }
+
+    // Picture-in-picture functionality
+    function togglePictureInPicture() {
+        const video = document.getElementById('video-player');
+        if (!video || !video.requestPictureInPicture) return;
+
+        if (document.pictureInPictureElement) {
+            document.exitPictureInPicture();
+        } else {
+            video.requestPictureInPicture();
+        }
+    }
+
+    // Sound notification for new messages
+    function playNotificationSound() {
+        if (!AppState.soundEnabled || !document.hidden) return;
+
+        try {
+            const audioContext = new (window.AudioContext || window.webkitAudioContext)();
+            const oscillator = audioContext.createOscillator();
+            const gainNode = audioContext.createGain();
+
+            oscillator.connect(gainNode);
+            gainNode.connect(audioContext.destination);
+
+            oscillator.frequency.value = 800;
+            oscillator.type = 'sine';
+            gainNode.gain.value = 0.1;
+
+            oscillator.start(audioContext.currentTime);
+            oscillator.stop(audioContext.currentTime + 0.1);
+        } catch(e) {
+            AppLogger.log('Audio notification failed:', e);
+        }
+    }
+
+    // Mobile responsive behavior
+    function handleWindowResize() {
+        const isMobile = window.innerWidth <= AppConfig.ui.mobileBreakpoint;
+
+        if (isMobile && !AppState.chatCollapsed) {
+            // Auto-collapse chat on mobile for better viewing
+            toggleChat();
+        }
+    }
+
+    // Page visibility API handler
+    function handleVisibilityChange() {
+        if (!document.hidden && !AppState.chatCollapsed) {
+            // Clear unread count when page becomes visible
+            AppState.unreadCount = 0;
+            updateNotificationBadge();
+        }
+    }
+
+    // DOM utility functions
+    const DOMUtils = {
+        // Add event listener with proper cleanup tracking
+        addEvent: function(element, event, handler) {
+            if (!element) return;
+
+            element.addEventListener(event, handler);
+
+            // Store handler for potential cleanup
+            if (!element._handlers) {
+                element._handlers = new Map();
+            }
+            if (!element._handlers.has(event)) {
+                element._handlers.set(event, []);
+            }
+            element._handlers.get(event).push(handler);
+        },
+
+        // Remove event listeners (for cleanup)
+        removeEvent: function(element, event, handler) {
+            if (!element || !element._handlers || !element._handlers.has(event)) return;
+
+            const handlers = element._handlers.get(event);
+            const index = handlers.indexOf(handler);
+            if (index > -1) {
+                handlers.splice(index, 1);
+                element.removeEventListener(event, handler);
+            }
+        },
+
+        // Get element with optional error logging
+        getElement: function(id, required = false) {
+            const element = document.getElementById(id);
+            if (required && !element) {
+                AppLogger.error(`Required element with id '${id}' not found`);
+            }
+            return element;
+        },
+
+        // Add/remove classes safely
+        addClass: function(element, className) {
+            if (element) element.classList.add(className);
+        },
+
+        removeClass: function(element, className) {
+            if (element) element.classList.remove(className);
+        },
+
+        toggleClass: function(element, className) {
+            if (element) element.classList.toggle(className);
+        }
+    };
+
+    // Initialize event listeners
+    function initializeEventListeners() {
+        // Keyboard shortcuts
+        DOMUtils.addEvent(document, 'keydown', handleKeyboardShortcuts);
+
+        // Window resize for mobile responsiveness
+        DOMUtils.addEvent(window, 'resize', handleWindowResize);
+
+        // Page visibility for notification clearing
+        DOMUtils.addEvent(document, 'visibilitychange', handleVisibilityChange);
+
+        AppLogger.log('UI controls event listeners initialized');
+    }
+
+    // Public API
+    window.UIControls = {
+        showToast: showToast,
+        hideToast: hideToast,
+        toggleChat: toggleChat,
+        toggleFullscreen: toggleFullscreen,
+        togglePictureInPicture: togglePictureInPicture,
+        updateViewerCount: updateViewerCount,
+        updateConnectionStatus: updateConnectionStatus,
+        updateNotificationBadge: updateNotificationBadge,
+        playNotificationSound: playNotificationSound,
+        DOMUtils: DOMUtils
+    };
+
+    // Initialize when DOM is ready
+    document.addEventListener('DOMContentLoaded', initializeEventListeners);
+
+    AppLogger.log('UI Controls module loaded');
+
+})();
diff --git a/video-player.js b/video-player.js
new file mode 100644
index 0000000..085564a
--- /dev/null
+++ b/video-player.js
@@ -0,0 +1,540 @@
+// Video Player Module
+// Handles Video.js initialization, stream management, and player controls
+
+(function() {
+    'use strict';
+
+    AppModules.require('api', 'ui-controls');
+    AppModules.register('video-player');
+
+    // Stream status management
+    function updateStreamStatus(status, color) {
+        const badge = document.querySelector('.stream-badge');
+        if (badge) {
+            badge.textContent = status;
+            badge.style.background = color || 'var(--dodgers-red)';
+            AppLogger.log(`📊 Stream status updated: ${status} (${color || 'red'})`);
+        }
+    }
+
+    // Video.js player initialization
+    function initializePlayer() {
+        AppLogger.log('🎬 Starting Video.js initialization...');
+
+        AppState.player = videojs('video-player', {
+            html5: {
+                vhs: {
+                    overrideNative: true,
+                    withCredentials: false,
+                    handlePartialData: true,
+                    smoothQualityChange: true,
+                    allowSeeksWithinUnsafeLiveWindow: true,
+                    handleManifestRedirects: true,
+                    useBandwidthFromLocalStorage: true,
+                    maxPlaylistRetries: 10,
+                    blacklistDuration: 5,
+                    bandwidth: 4194304
+                }
+            },
+            liveui: true,
+            liveTracker: {
+                trackingThreshold: 30,
+                liveTolerance: 15
+            },
+            errorDisplay: false,
+            responsive: false,
+            controlBar: {
+                volumePanel: {
+                    inline: false
+                },
+                pictureInPictureToggle: true
+            }
+        });
+
+        // Volume enforcement and restoration
+        setupVolumeManagement();
+
+        // Stream status checking
+        setupStreamMonitoring();
+
+        // Error handling
+        setupPlayerErrorHandling();
+
+        // Event handlers
+        setupPlayerEvents();
+
+        AppLogger.log('Video.js player initialized successfully');
+    }
+
+    // Volume management system
+    function setupVolumeManagement() {
+        AppState.player.ready(function() {
+            AppLogger.log('Player is ready');
+
+            // Immediate volume fix
+            enforceSavedVolume();
+
+            // Load saved volume or set default
+            const savedVolume = localStorage.getItem('playerVolume');
+            if (savedVolume !== null) {
+                const volumeValue = parseFloat(savedVolume);
+                AppState.player.volume(volumeValue);
+                AppLogger.log('🔊 Restored saved volume:', volumeValue);
+            } else {
+                AppState.player.volume(AppConfig.video.defaultVolume);
+                AppLogger.log('🔊 Set default volume:', AppConfig.video.defaultVolume);
+            }
+
+            // Volume monitoring and enforcement
+            AppState.player.on('volumechange', function() {
+                if (!enforceSavedVolume()) {
+                    // User's intentional change - save it
+                    if (!AppState.player.muted()) {
+                        const newVolume = AppState.player.volume();
+                        localStorage.setItem('playerVolume', newVolume);
+                        AppLogger.log('💾 Saved volume setting:', newVolume);
+                    }
+                }
+            });
+
+            // PROACTIVE STREAM STATUS CHECK
+            checkInitialStreamStatus();
+        });
+    }
+
+    // Volume enforcement function
+    function enforceSavedVolume() {
+        const currentVolume = AppState.player.volume();
+        if (currentVolume === 1.0) {
+            const savedVolume = parseFloat(localStorage.getItem('playerVolume') || AppConfig.video.defaultVolume.toString());
+            if (savedVolume !== 1.0) {
+                AppLogger.log('🚫 BLOCKED: Volume reset to 100% - forcing back to:', savedVolume);
+                AppState.player.volume(savedVolume);
+                return true;
+            }
+        }
+        return false;
+    }
+
+    // Stream status and monitoring
+    function checkInitialStreamStatus() {
+        AppLogger.log('🔍 Checking initial stream status...');
+
+        API.checkStreamStatus()
+            .then(isOnline => {
+                if (!isOnline) {
+                    AppLogger.log('🔄 Stream offline on load - switching to placeholder immediately');
+                    switchToPlaceholder();
+                } else {
+                    AppLogger.log('✅ Stream online on load - starting HLS playback');
+                    attemptHLSPlayback();
+                    startStreamMonitoring();
+                }
+            });
+    }
+
+    function startStreamMonitoring() {
+        if (!AppState.recoveryInterval) {
+            AppLogger.log('👁️ Starting stream monitoring...');
+            AppState.recoveryInterval = setInterval(() => {
+                if (AppState.streamMode !== 'placeholder') {
+                    API.checkStreamStatus()
+                        .then(data => {
+                            if (!data.online) {
+                                AppLogger.log('⚠️ Stream went offline during playback - switching to placeholder');
+                                switchToPlaceholder();
+                            }
+                        })
+                        .catch(error => {
+                            AppLogger.error('❗ Stream monitoring check failed:', error);
+                        });
+                }
+            }, AppConfig.video.streamMonitoringInterval);
+        }
+    }
+
+    // HLS playback attempt
+    function attemptHLSPlayback() {
+        AppLogger.log('🎬 Attempting HLS stream playback...');
+
+        var playPromise = AppState.player.play();
+        if (playPromise !== undefined) {
+            playPromise.catch(function(error) {
+                AppLogger.log('Auto-play was prevented:', error);
+                UIControls.showToast('Click play to start stream');
+            });
+        }
+    }
+
+    // Player error handling
+    function setupPlayerErrorHandling() {
+        // Warning events from Video.js
+        AppState.player.on('warning', function(event) {
+            AppLogger.log('VideoJS warning:', event.detail);
+            if (!AppState.isRetrying && !AppState.isRecovering && AppState.streamMode === 'live') {
+                AppState.errorRetryCount++;
+                AppLogger.log('Warning count now:', AppState.errorRetryCount);
+                if (AppState.errorRetryCount >= 3) {
+                    AppLogger.log('Threshold reached, switching to placeholder');
+                    switchToPlaceholder();
+                }
+            }
+        });
+
+        // Error handling
+        AppState.player.on('error', function() {
+            var error = AppState.player.error();
+            AppLogger.log('Player error:', error);
+
+            if (AppState.isRetrying || AppState.streamMode === 'placeholder') return;
+
+            if (error && (error.code === 2 || error.code === 4)) {
+                if (AppState.errorRetryCount < AppConfig.video.maxRetries) {
+                    AppState.isRetrying = true;
+                    AppState.errorRetryCount++;
+
+                    AppLogger.log(`Attempting recovery (${AppState.errorRetryCount}/${AppConfig.video.maxRetries})...`);
+                    updateStreamStatus('RECONNECTING...', '#ffc107');
+
+                    setTimeout(() => {
+                        AppState.player.error(null);
+                        AppState.player.pause();
+                        AppState.player.reset();
+
+                        // Restore volume
+                        enforceSavedVolume();
+
+                        // Try playing again
+                        if (AppState.player.paused()) {
+                            AppState.player.play().catch(e => AppLogger.log('Play attempt failed:', e));
+                        }
+
+                        AppState.isRetrying = false;
+
+                        // Soft reload fallback
+                        setTimeout(() => {
+                            if (AppState.player.error()) {
+                                AppLogger.log('Soft reloading source...');
+                                const currentTime = AppState.player.currentTime();
+                                AppState.player.src(AppState.player.currentSrc());
+                                AppState.player.play().catch(e => AppLogger.log('Play after reload failed:', e));
+                            }
+                        }, 3000);
+
+                    }, 1000 * Math.min(AppState.errorRetryCount, 3));
+
+                } else {
+                    AppLogger.error('Max retries exceeded, switching to placeholder video');
+                    switchToPlaceholder();
+                }
+            } else if (error && error.code === 3) {
+                AppLogger.error('Decode error, switching to placeholder:', error);
+                switchToPlaceholder();
+            }
+        });
+    }
+
+    // Player event setup
+    function setupPlayerEvents() {
+        // Reset error count on successful playback
+        AppState.player.on('loadeddata', function() {
+            AppState.errorRetryCount = 0;
+            AppState.isRetrying = false;
+            if (AppState.streamMode === 'live') {
+                updateStreamStatus('LIVE', 'var(--dodgers-red)');
+            }
+        });
+
+        AppState.player.on('playing', function() {
+            AppState.errorRetryCount = 0;
+            AppState.isRetrying = false;
+            if (AppState.streamMode === 'live') {
+                updateStreamStatus('LIVE', 'var(--dodgers-red)');
+            }
+        });
+
+        AppState.player.on('waiting', function() {
+            AppLogger.log('Player is buffering...');
+            if (!AppState.isRetrying && AppState.errorRetryCount === 0 && AppState.streamMode === 'live') {
+                updateStreamStatus('BUFFERING...', '#ffc107');
+            }
+
+            // Extended buffering detection
+            const waitingStartTime = Date.now();
+            let offlineConfirmCount = 0;
+
+            function checkBufferingStatus(attempt = 1, maxAttempts = 5) {
+                API.checkStreamStatus()
+                    .then(data => {
+                        if (!data.online) {
+                            offlineConfirmCount++;
+                            AppLogger.log(`⚠️ Confirmed offline - Attempts: ${offlineConfirmCount}/${maxAttempts}`);
+
+                            if (offlineConfirmCount >= 2 || attempt >= maxAttempts) {
+                                AppLogger.log('❌ Stream confirmed offline - switching to placeholder');
+                                switchToPlaceholder();
+                                return;
+                            }
+                        } else {
+                            offlineConfirmCount = 0;
+                        }
+
+                        if (offlineConfirmCount < 2 && attempt < maxAttempts) {
+                            setTimeout(() => checkBufferingStatus(attempt + 1, maxAttempts), 1500);
+                        }
+                    })
+                    .catch(apiError => {
+                        AppLogger.log('❗ API check failed:', apiError);
+                        if (attempt < maxAttempts) {
+                            setTimeout(() => checkBufferingStatus(attempt + 1, maxAttempts), 1500);
+                        }
+                    });
+            }
+
+            checkBufferingStatus();
+        });
+
+        // Context menu prevention
+        document.getElementById('video-player').addEventListener('contextmenu', function(e) {
+            e.preventDefault();
+            return false;
+        });
+
+        AppState.player.ready(function() {
+            const videoElement = AppState.player.el().querySelector('video');
+            if (videoElement) {
+                videoElement.addEventListener('contextmenu', function(e) {
+                    e.preventDefault();
+                    return false;
+                });
+            }
+        });
+    }
+
+    // Stream switching functions
+    function switchToPlaceholder() {
+        if (AppState.streamMode === 'placeholder') {
+            AppLogger.log('⚠️ Already in placeholder mode, ignoring switch request');
+            return;
+        }
+
+        AppLogger.log('🔄 START: Switching to placeholder video');
+        AppLogger.log('📊 State before switch:', {
+            streamMode: AppState.streamMode,
+            errorRetryCount: AppState.errorRetryCount,
+            isRecovering: AppState.isRecovering
+        });
+
+        AppState.streamMode = 'placeholder';
+
+        if (AppState.recoveryInterval) {
+            clearInterval(AppState.recoveryInterval);
+            AppState.recoveryInterval = null;
+        }
+        if (AppState.recoveryTimeout) {
+            clearTimeout(AppState.recoveryTimeout);
+            AppState.recoveryTimeout = null;
+        }
+
+        updateStreamStatus('SWITCHING...', '#ffc107');
+
+        try {
+            AppState.player.pause();
+            AppState.player.reset();
+            enforceSavedVolume();
+
+            setTimeout(() => {
+                AppState.player.src({
+                    src: 'placeholder.mp4',
+                    type: 'video/mp4'
+                });
+
+                AppState.player.load();
+                setTimeout(() => enforceSavedVolume(), 200);
+
+                AppState.player.play()
+                    .then(() => {
+                        AppLogger.log('Placeholder video started successfully');
+                        const savedVolume = localStorage.getItem('playerVolume') || AppConfig.video.defaultVolume.toString();
+                        const targetVolume = parseFloat(savedVolume);
+                        AppState.player.volume(targetVolume);
+                        updateStreamStatus('PLACEHOLDER', '#17a2b8');
+                        UIControls.showToast('Stream offline - showing placeholder video');
+                        startRecoveryChecks();
+                    })
+                    .catch(e => {
+                        AppLogger.log('Placeholder play failed:', e);
+                        updateStreamStatus('PLACEHOLDER', '#17a2b8');
+                        UIControls.showToast('Stream offline - showing placeholder video');
+                        startRecoveryChecks();
+                    });
+
+            }, 1000);
+
+        } catch (e) {
+            AppLogger.log('Error switching to placeholder:', e);
+            updateStreamStatus('PLACEHOLDER', '#17a2b8');
+            startRecoveryChecks();
+        }
+    }
+
+    function switchToLive() {
+        if (AppState.streamMode === 'live') {
+            AppLogger.log('⚠️ Already in live mode, ignoring switch request');
+            return;
+        }
+
+        AppLogger.log('🔄 START: Switching back to live stream');
+        AppLogger.log('📊 State before switch:', {
+            streamMode: AppState.streamMode,
+            isRecovering: AppState.isRecovering
+        });
+
+        AppState.streamMode = 'live';
+        AppState.isRecovering = false;
+
+        if (AppState.recoveryInterval) {
+            clearInterval(AppState.recoveryInterval);
+            AppState.recoveryInterval = null;
+        }
+
+        updateStreamStatus('SWITCHING...', '#ffc107');
+
+        try {
+            AppState.player.pause();
+            AppState.player.reset();
+            enforceSavedVolume();
+
+            setTimeout(() => {
+                AppState.player.src({
+                    src: '?proxy=stream',
+                    type: 'application/x-mpegURL'
+                });
+
+                AppState.errorRetryCount = 0;
+                AppState.isRetrying = false;
+
+                AppState.player.load();
+                setTimeout(() => enforceSavedVolume(), 200);
+
+                AppState.player.play()
+                    .then(() => {
+                        AppLogger.log('Live stream started successfully');
+                        const savedVolume = localStorage.getItem('playerVolume') || AppConfig.video.defaultVolume.toString();
+                        const targetVolume = parseFloat(savedVolume);
+                        AppState.player.volume(targetVolume);
+                        updateStreamStatus('RECONNECTING...', '#ffc107');
+                        UIControls.showToast('Stream back online - switching to live');
+
+                        setTimeout(() => {
+                            if (AppState.streamMode === 'live') {
+                                updateStreamStatus('LIVE', 'var(--dodgers-red)');
+                            }
+                        }, 2000);
+                    })
+                    .catch(e => {
+                        AppLogger.log('Live stream play failed:', e);
+                        const savedVolume = localStorage.getItem('playerVolume') || AppConfig.video.defaultVolume.toString();
+                        const targetVolume = parseFloat(savedVolume);
+                        AppState.player.volume(targetVolume);
+                        updateStreamStatus('LIVE', 'var(--dodgers-red)');
+                        UIControls.showToast('Stream back online - switching to live');
+                    });
+
+            }, 1000);
+
+        } catch (e) {
+            AppLogger.log('Error switching to live:', e);
+            AppState.player.src({ src: '?proxy=stream', type: 'application/x-mpegURL' });
+            AppState.player.load();
+        }
+    }
+
+    // Recovery check system
+    function startRecoveryChecks() {
+        AppLogger.log('🔍 Starting fast recovery checks every 2 seconds for 5 checks');
+
+        let recoveryCheckCount = 0;
+        let recoveryTimeout;
+
+        function checkRecovery() {
+            if (AppState.streamMode !== 'placeholder' || recoveryCheckCount >= AppConfig.video.recoveryCheckCount) {
+                if (recoveryCheckCount >= AppConfig.video.recoveryCheckCount) {
+                    AppLogger.log('⏹️ Fast recovery checks complete - stream still offline');
+                }
+                return;
+            }
+
+            recoveryCheckCount++;
+            AppLogger.log(`🔍 Recovery check ${recoveryCheckCount}/${AppConfig.video.recoveryCheckCount}...`);
+
+            API.checkStreamStatus()
+                .then(data => {
+                    if (data.online && AppState.streamMode === 'placeholder') {
+                        AppLogger.log('✅ Stream back online during recovery check - switching');
+                        AppState.isRecovering = true;
+                        switchToLive();
+                    } else {
+                        if (recoveryCheckCount < AppConfig.video.recoveryCheckCount) {
+                            recoveryTimeout = setTimeout(checkRecovery, AppConfig.video.recoveryCheckInterval);
+                        }
+                    }
+                })
+                .catch(error => {
+                    AppLogger.log(`❗ Recovery check ${recoveryCheckCount} failed:`, error);
+                    if (recoveryCheckCount < AppConfig.video.recoveryCheckCount) {
+                        recoveryTimeout = setTimeout(checkRecovery, AppConfig.video.recoveryCheckInterval);
+                    }
+                });
+        }
+
+        checkRecovery();
+    }
+
+    // Manual recovery function
+    function manualRecovery() {
+        AppLogger.log('🔄 Manual recovery triggered by user');
+        AppState.errorRetryCount = 0;
+        AppState.isRetrying = false;
+
+        UIControls.showToast('🔄 Manual stream refresh triggered');
+
+        AppState.player.reset();
+        AppState.player.error(null);
+
+        AppState.player.src({
+            src: '?proxy=stream',
+            type: 'application/x-mpegURL'
+        });
+
+        AppState.player.load();
+
+        setTimeout(() => {
+            AppState.player.play().catch(e => AppLogger.log('Manual recovery play failed:', e));
+        }, 500);
+    }
+
+    // Public API
+    window.VideoPlayer = {
+        initializePlayer: initializePlayer,
+        switchToPlaceholder: switchToPlaceholder,
+        switchToLive: switchToLive,
+        manualRecovery: manualRecovery,
+        updateStreamStatus: updateStreamStatus
+    };
+
+    // Initialize player when DOM and Video.js are ready
+    document.addEventListener('DOMContentLoaded', function() {
+        // Check if Video.js is loaded
+        if (typeof videojs === 'undefined') {
+            AppLogger.error('Video.js not found - video player will not initialize');
+            return;
+        }
+
+        // Small delay to ensure DOM is fully ready
+        setTimeout(initializePlayer, 50);
+    });
+
+    AppLogger.log('Video Player module loaded');
+
+})();