diff --git a/src/static/rooms.js b/src/static/rooms.js
index 13546db..a1a4b4a 100644
--- a/src/static/rooms.js
+++ b/src/static/rooms.js
@@ -25,7 +25,7 @@ function closePublicRoomsBrowser() {
 
 // Subscribe to live public rooms updates
 function subscribeToPublicRooms() {
-    if (typeof socket !== 'undefined' && socket.connected && !isSubscribedToRooms) {
+    if (typeof socket !== 'undefined' && socket !== null && socket.connected && !isSubscribedToRooms) {
         socket.emit('subscribe_public_rooms');
         isSubscribedToRooms = true;
         console.log('Subscribed to public rooms updates');
@@ -34,7 +34,7 @@ function subscribeToPublicRooms() {
 
 // Unsubscribe from public rooms updates
 function unsubscribeFromPublicRooms() {
-    if (typeof socket !== 'undefined' && socket.connected && isSubscribedToRooms) {
+    if (typeof socket !== 'undefined' && socket !== null && socket.connected && isSubscribedToRooms) {
         socket.emit('unsubscribe_public_rooms');
         isSubscribedToRooms = false;
         console.log('Unsubscribed from public rooms updates');
@@ -49,7 +49,7 @@ function loadPublicRoomsWebSocket() {
         currentSortBy = document.getElementById('roomsSortSelect').value;
         currentMinUsers = document.getElementById('minUsersFilter').value || 0;
         
-        if (typeof socket !== 'undefined' && socket.connected) {
+        if (typeof socket !== 'undefined' && socket !== null && socket.connected) {
             socket.emit('request_public_rooms', {
                 sort: currentSortBy,
                 min_users: currentMinUsers,
@@ -106,29 +106,39 @@ function refreshPublicRooms() {
 // Update stats display
 function updateStatsDisplay(stats) {
     const statsElement = document.getElementById('roomsStats');
-    statsElement.textContent = `${stats.public_rooms} public rooms • ${stats.total_users} users online`;
+    if (statsElement) {
+        statsElement.textContent = `${stats.public_rooms} public rooms • ${stats.total_users} users online`;
+    }
 }
 
 // Show loading state
 function showLoadingState() {
-    document.getElementById('roomsLoading').style.display = 'flex';
-    document.getElementById('roomsList').style.display = 'none';
-    document.getElementById('roomsEmpty').style.display = 'none';
+    const loadingElement = document.getElementById('roomsLoading');
+    const listElement = document.getElementById('roomsList');
+    const emptyElement = document.getElementById('roomsEmpty');
+    
+    if (loadingElement) loadingElement.style.display = 'flex';
+    if (listElement) listElement.style.display = 'none';
+    if (emptyElement) emptyElement.style.display = 'none';
 }
 
 // Show error state
 function showErrorState() {
-    document.getElementById('roomsLoading').style.display = 'none';
-    document.getElementById('roomsList').style.display = 'none';
-    document.getElementById('roomsEmpty').style.display = 'flex';
-    
+    const loadingElement = document.getElementById('roomsLoading');
+    const listElement = document.getElementById('roomsList');
     const emptyElement = document.getElementById('roomsEmpty');
-    emptyElement.innerHTML = `
-        <div style="font-size: 3rem; margin-bottom: 1rem;">⚠️</div>
-        <h3 style="margin: 0 0 0.5rem 0; color: #ffffff;">Failed to Load Rooms</h3>
-        <p style="margin: 0 0 1rem 0;">Unable to connect to the server. Please try again.</p>
-        <button class="btn" onclick="refreshPublicRooms()">Retry</button>
-    `;
+    
+    if (loadingElement) loadingElement.style.display = 'none';
+    if (listElement) listElement.style.display = 'none';
+    if (emptyElement) {
+        emptyElement.style.display = 'flex';
+        emptyElement.innerHTML = `
+            <div style="font-size: 3rem; margin-bottom: 1rem;">⚠️</div>
+            <h3 style="margin: 0 0 0.5rem 0; color: #ffffff;">Failed to Load Rooms</h3>
+            <p style="margin: 0 0 1rem 0;">Unable to connect to the server. Please try again.</p>
+            <button class="btn" onclick="refreshPublicRooms()">Retry</button>
+        `;
+    }
 }
 
 // Display rooms
@@ -137,18 +147,19 @@ function displayRooms() {
     const roomsLoading = document.getElementById('roomsLoading');
     const roomsEmpty = document.getElementById('roomsEmpty');
     
-    roomsLoading.style.display = 'none';
+    if (roomsLoading) roomsLoading.style.display = 'none';
     
     if (publicRoomsData.length === 0) {
-        roomsEmpty.style.display = 'flex';
-        roomsList.style.display = 'none';
+        if (roomsEmpty) roomsEmpty.style.display = 'flex';
+        if (roomsList) roomsList.style.display = 'none';
         return;
     }
     
-    roomsEmpty.style.display = 'none';
-    roomsList.style.display = 'block';
-    
-    roomsList.innerHTML = publicRoomsData.map(room => createRoomCard(room)).join('');
+    if (roomsEmpty) roomsEmpty.style.display = 'none';
+    if (roomsList) {
+        roomsList.style.display = 'block';
+        roomsList.innerHTML = publicRoomsData.map(room => createRoomCard(room)).join('');
+    }
 }
 
 // Create room card HTML
@@ -221,10 +232,16 @@ function joinPublicRoom(roomId) {
     closePublicRoomsBrowser();
     
     // Fill in the room input with the selected room
-    document.getElementById('roomInput').value = roomId;
+    const roomInput = document.getElementById('roomInput');
+    if (roomInput) {
+        roomInput.value = roomId;
+    }
     
     // Clear password field since these are public rooms
-    document.getElementById('roomPasswordInput').value = '';
+    const roomPasswordInput = document.getElementById('roomPasswordInput');
+    if (roomPasswordInput) {
+        roomPasswordInput.value = '';
+    }
     
     // Trigger your existing join room functionality
     const joinButton = document.getElementById('joinRoomBtn');
@@ -233,29 +250,9 @@ function joinPublicRoom(roomId) {
     }
 }
 
-// Event listeners for controls
-document.addEventListener('DOMContentLoaded', function() {
-    document.getElementById('roomsSortSelect').addEventListener('change', refreshPublicRooms);
-    document.getElementById('minUsersFilter').addEventListener('change', refreshPublicRooms);
-});
-
-// Close on escape key
-document.addEventListener('keydown', function(e) {
-    if (e.key === 'Escape' && document.getElementById('publicRoomsBrowser').style.display === 'block') {
-        closePublicRoomsBrowser();
-    }
-});
-
-// Close on backdrop click
-document.getElementById('publicRoomsBrowser').addEventListener('click', function(e) {
-    if (e.target === this) {
-        closePublicRoomsBrowser();
-    }
-});
-
 // WebSocket event handlers for real-time updates
 function setupPublicRoomsWebSocketHandlers() {
-    if (typeof socket === 'undefined') {
+    if (typeof socket === 'undefined' || socket === null) {
         console.log('Socket not available, using HTTP fallback');
         return;
     }
@@ -277,7 +274,8 @@ function setupPublicRoomsWebSocketHandlers() {
         console.log('Received live public rooms update:', data);
         
         // Only update if the browser is currently open and we're subscribed
-        if (document.getElementById('publicRoomsBrowser').style.display === 'block' && isSubscribedToRooms) {
+        const browserElement = document.getElementById('publicRoomsBrowser');
+        if (browserElement && browserElement.style.display === 'block' && isSubscribedToRooms) {
             publicRoomsData = data.rooms || [];
             
             if (data.stats) {
@@ -299,21 +297,55 @@ function setupPublicRoomsWebSocketHandlers() {
 
 // Auto-setup WebSocket handlers when page loads
 function waitForSocketAndSetupHandlers() {
-    if (typeof socket !== 'undefined' && socket.connected) {
+    if (typeof socket !== 'undefined' && socket !== null && socket.connected) {
         setupPublicRoomsWebSocketHandlers();
     } else {
         setTimeout(waitForSocketAndSetupHandlers, 100);
     }
 }
 
-// Start the setup process
+// Event listeners for controls
 document.addEventListener('DOMContentLoaded', function() {
+    // Add null checks for DOM elements
+    const sortSelect = document.getElementById('roomsSortSelect');
+    const minUsersFilter = document.getElementById('minUsersFilter');
+    
+    if (sortSelect) {
+        sortSelect.addEventListener('change', refreshPublicRooms);
+    }
+    
+    if (minUsersFilter) {
+        minUsersFilter.addEventListener('change', refreshPublicRooms);
+    }
+    
+    // Start the WebSocket setup process
     waitForSocketAndSetupHandlers();
     
     // Auto-refresh every 30 seconds when browser is open
     setInterval(function() {
-        if (document.getElementById('publicRoomsBrowser').style.display === 'block') {
+        const browserElement = document.getElementById('publicRoomsBrowser');
+        if (browserElement && browserElement.style.display === 'block') {
             refreshPublicRooms();
         }
     }, 30000);
 });
+
+// Close on escape key
+document.addEventListener('keydown', function(e) {
+    const browserElement = document.getElementById('publicRoomsBrowser');
+    if (e.key === 'Escape' && browserElement && browserElement.style.display === 'block') {
+        closePublicRoomsBrowser();
+    }
+});
+
+// Close on backdrop click
+document.addEventListener('DOMContentLoaded', function() {
+    const browserElement = document.getElementById('publicRoomsBrowser');
+    if (browserElement) {
+        browserElement.addEventListener('click', function(e) {
+            if (e.target === this) {
+                closePublicRoomsBrowser();
+            }
+        });
+    }
+});
\ No newline at end of file
diff --git a/src/templates/chat.html b/src/templates/chat.html
index 1188b7e..6a83da1 100644
--- a/src/templates/chat.html
+++ b/src/templates/chat.html
@@ -9,10 +9,6 @@
     <link rel="stylesheet" href="{{ url_for('static', filename='stylesheet.css') }}">
     <link rel="icon" type="image/png" href="{{ url_for('static', filename='favicon.png') }}">
     <script src="https://cdn.jsdelivr.net/npm/socket.io-client@4.7.2/dist/socket.io.min.js"></script>
-    <!-- Everything Locally Hosted ( javascript files for frontend / client encryption )-->
-    <script src="{{ url_for('static', filename='script.js') }}"></script>
-    <script src="{{ url_for('static', filename='frontend.js') }}"></script>
-    <script src="{{ url_for("static", filename="rss.js")}}" async></script>
 </head>
 <body style="overflow-y: auto;">
     <div class="chat-container">
@@ -33,10 +29,9 @@
         <div id="welcomeScreen" class="welcome-screen" style="padding: 1rem;">
             <h1 class="welcome-title" style="font-size: clamp(1.75rem, 8vw, 3rem); margin-bottom: 0.75rem;">Anonymous Chatting</h1>
             <p class="welcome-subtitle" style="font-size: clamp(0.9rem, 3.5vw, 1.1rem); margin-bottom: 2rem; padding: 0 0.5rem;">
-                If you are coming from the "ngrok" link. Then you probably saw the warning page. That this Page may be maillicious.
+                If you are coming from the "ngrok" link. Then you probably saw the warning page. That this Page may be malicious.
                 We are focused on privacy and encrypted messaging. We do not serve any harmful code. We are 
-                <a style="text-decoration: none; color:#00ff88;font-style: inherit; font-style: italic;"  href="https://rattatwinko.servecounterstrike.com/gitea/rattatwinko/bytechat"
-                >OSS</a>
+                <a style="text-decoration: none; color:#00ff88;font-style: inherit; font-style: italic;" href="https://rattatwinko.servecounterstrike.com/gitea/rattatwinko/bytechat">OSS</a>
             </p>
             
             <div class="room-section" style="width: 100%; max-width: 500px;">
@@ -62,7 +57,7 @@
                     </div>
                     <!-- Browse Public Rooms Button -->
                     <div style="display: flex; justify-content: center; width: 100%;">
-                        <button class="btn btn-secondary" onclick="showPublicRoomsBrowser()" style="font-size: clamp(0.85rem, 3.5vw, 1rem); padding: 0.6rem 1.5rem;">
+                        <button class="btn btn-secondary" id="browsePublicRoomsBtn" style="font-size: clamp(0.85rem, 3.5vw, 1rem); padding: 0.6rem 1.5rem;">
                             Browse Public Rooms
                         </button>
                     </div>
@@ -87,7 +82,7 @@
                     <h2 style="font-size: clamp(1.25rem, 5vw, 1.75rem); margin-bottom: 1rem; color: #00ff88;">Desktop Application</h2>
                     <p style="font-size: clamp(0.9rem, 3.5vw, 1.1rem); margin-bottom: 1.5rem; line-height: 1.6; color: #b0b0b0;">
                         For a better experience, consider downloading our desktop application. It offers enhanced performance 
-                        trough native Encryption (instead of Browser-Reliant Encryption). Click the button below to download the latest version.
+                        through native Encryption (instead of Browser-Reliant Encryption). Click the button below to download the latest version.
                     </p>
                     
                     <!-- Desktop App Download Button -->
@@ -118,6 +113,7 @@
             </div>
         </div>
 
+        <!-- Public Rooms Browser - Fixed structure -->
         <div id="publicRoomsBrowser" style="
             display: none;
             position: fixed;
@@ -129,26 +125,14 @@
             backdrop-filter: blur(10px);
             z-index: 2000;
             padding: 1rem;
-            
-            /* Center content */
-            display: flex;
             justify-content: center;
             align-items: center;
-            
-            /* Optional: allow content to scroll if it overflows on small screens */
             overflow: auto;
         ">
             <div id="browserContent" style="
                 max-width: 95%;
                 max-height: 95%;
                 overflow-y: auto;
-                background: #fff; /* or whatever your modal background is */
-                border-radius: 8px;
-                padding: 1rem;
-            ">
-            <div style="
-                max-width: 800px;
-                margin: 0 auto;
                 background: #1a1a1a;
                 border-radius: 12px;
                 border: 1px solid #333;
@@ -180,7 +164,7 @@
                     </div>
                     <button 
                         class="btn btn-secondary" 
-                        onclick="closePublicRoomsBrowser()"
+                        id="closePublicRoomsBrowserBtn"
                         style="
                             padding: 0.5rem 1rem;
                             font-size: 0.9rem;
@@ -232,7 +216,7 @@
 
                     <button 
                         class="btn" 
-                        onclick="refreshPublicRooms()"
+                        id="refreshPublicRoomsBtn"
                         style="
                             padding: 0.5rem 1rem;
                             font-size: 0.9rem;
@@ -254,7 +238,7 @@
                         gap: 1rem;
                         color: #888;
                     ">
-                        <div style="
+                        <div class="loading-spinner" style="
                             width: 20px;
                             height: 20px;
                             border: 2px solid #333;
@@ -277,7 +261,7 @@
 
                 <!-- Empty State -->
                 <div id="roomsEmpty" style="
-                    display: none; /* This should be none initially, not flex ; fuck CSS*/
+                    display: none;
                     justify-content: center;
                     align-items: center;
                     padding: 3rem;
@@ -285,7 +269,7 @@
                     text-align: center;
                 ">
                     <div>
-                        <h3 style="margin: 0 0 0.5rem 0; color: #ffffff;">… No Public Rooms Found</h3>
+                        <h3 style="margin: 0 0 0.5rem 0; color: #ffffff;">No Public Rooms Found</h3>
                         <p style="margin: 0; color: #888;">Check back later or create your own room</p>
                     </div>
                 </div>
@@ -305,38 +289,50 @@
                 </div>
             </div>
 
-        <!-- wrapper for scroll -->
-        <div class="messages-wrapper" id="messagesWrapper" style="padding: 0.75rem; padding-bottom: 80px; flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; scroll-behavior: smooth;">
-            <div class="messages-container" id="messagesContainer" role="log" aria-live="polite" aria-label="Chat messages">
-                <!-- Messages will be inserted here -->
+            <!-- wrapper for scroll -->
+            <div class="messages-wrapper" id="messagesWrapper" style="padding: 0.75rem; padding-bottom: 80px; flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; scroll-behavior: smooth;">
+                <div class="messages-container" id="messagesContainer" role="log" aria-live="polite" aria-label="Chat messages">
+                    <!-- Messages will be inserted here -->
+                </div>
+            </div>
+
+            <div class="input-section" id="inputSection" style="display: none; padding: 0.6rem 0.75rem; position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000; background: rgba(20, 20, 20, 0.98); backdrop-filter: blur(10px); border-top: 1px solid #333; box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);">
+                <div class="input-container" style="gap: 0.4rem; max-width: 100%;">
+                    <label for="messageInput" class="visually-hidden">Type your message</label>
+                    <textarea 
+                        class="message-input" 
+                        id="messageInput" 
+                        placeholder="Message ByteChat…" 
+                        rows="1"
+                        disabled
+                        maxlength="4000"
+                        aria-label="Type your message"
+                        style="font-size: clamp(0.9rem, 4vw, 1rem); padding: 0.6rem 0.8rem; border-radius: 10px; resize: none; max-height: 120px; min-height: 44px; font-size: 16px; -webkit-appearance: none;"
+                        autocomplete="off"
+                        autocapitalize="sentences"
+                        spellcheck="true"
+                    ></textarea>
+                    <button class="send-button" id="sendButton" disabled aria-label="Send message" style="width: 40px; height: 40px; flex-shrink: 0; -webkit-tap-highlight-color: transparent;">
+                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+                            <path d="m22 2-7 20-4-9-9-4 20-7z"/>
+                        </svg>
+                    </button>
+                </div>
             </div>
         </div>
     </div>
 
-        <div class="input-section" id="inputSection" style="display: none; padding: 0.6rem 0.75rem; position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000; background: rgba(20, 20, 20, 0.98); backdrop-filter: blur(10px); border-top: 1px solid #333; box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);">
-            <div class="input-container" style="gap: 0.4rem; max-width: 100%;">
-                <label for="messageInput" class="visually-hidden">Type your message</label>
-                <textarea 
-                    class="message-input" 
-                    id="messageInput" 
-                    placeholder="Message ByteChat…" 
-                    rows="1"
-                    disabled
-                    maxlength="4000"
-                    aria-label="Type your message"
-                    style="font-size: clamp(0.9rem, 4vw, 1rem); padding: 0.6rem 0.8rem; border-radius: 10px; resize: none; max-height: 120px; min-height: 44px; font-size: 16px; -webkit-appearance: none;"
-                    autocomplete="off"
-                    autocapitalize="sentences"
-                    spellcheck="true"
-                ></textarea>
-                <button class="send-button" id="sendButton" disabled aria-label="Send message" style="width: 40px; height: 40px; flex-shrink: 0; -webkit-tap-highlight-color: transparent;">
-                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
-                        <path d="m22 2-7 20-4-9-9-4 20-7z"/>
-                    </svg>
-                </button>
-            </div>
-        </div>
-    </div>
-    <script src="{{ url_for('static', filename="rooms.js") }}"></script>
+    <!-- Load scripts at the bottom for better initialization -->
+    <script src="{{ url_for('static', filename='script.js') }}" defer></script>
+    <script src="{{ url_for('static', filename='frontend.js') }}" defer></script>
+    <script src="{{ url_for('static', filename='rooms.js') }}"></script>
+    <script src="{{ url_for('static', filename='rss.js') }}" defer></script>
+
+    <style>
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+    </style>
 </body>
 </html>
\ No newline at end of file