diff --git a/src/anonchat/static/js/inquiry.js b/src/anonchat/static/js/inquiry.js
new file mode 100644
index 0000000..f10f1e3
--- /dev/null
+++ b/src/anonchat/static/js/inquiry.js
@@ -0,0 +1,73 @@
+const inquiryDetails = document.getElementById('inquiry-details');
+const inquiryId = inquiryDetails.dataset.inquiryId;
+let lastMessageNumber = inquiryDetails.dataset.lastMessageNumber;
+
+const messagesContainer = document.getElementById('messages-list');
+let updateInterval = null;
+
+function formatTimestamp(timestamp) {
+    const date = new Date(timestamp);
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    const hours = String(date.getHours()).padStart(2, '0');
+    const minutes = String(date.getMinutes()).padStart(2, '0');
+    const seconds = String(date.getSeconds()).padStart(2, '0');
+    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+}
+
+function createMessageElement(message) {
+    const div = document.createElement('div');
+    div.className = `message ${message.is_admin ? 'admin-message' : 'user-message'}`;
+    div.dataset.messageNumber = message.message_number;
+
+    const contentDiv = document.createElement('div');
+    contentDiv.className = 'content';
+    if (message.is_admin) {
+        const adminBadge = document.createElement('span');
+        adminBadge.className = 'admin-badge';
+        adminBadge.textContent = 'ADMIN:';
+        contentDiv.appendChild(adminBadge);
+    }
+    contentDiv.appendChild(document.createTextNode(message.content));
+    div.appendChild(contentDiv);
+
+    const timestampDiv = document.createElement('div');
+    timestampDiv.className = 'timestamp';
+    timestampDiv.textContent = formatTimestamp(message.timestamp);
+
+    div.appendChild(timestampDiv);
+    
+    return div;
+}
+
+function updateMessages() {
+    fetch(`/api/inquiry/${inquiryId}/messages?after_message_number=${lastMessageNumber}`)
+        .then(response => {
+        if (!response.ok) {
+            throw new Error(`HTTP error! Status: ${response.status}`);
+        }
+        return response.json();
+    }).then(data => {
+        if (data.messages && data.messages.length > 0) {
+            data.messages.forEach(message => {
+                if (message.message_number > lastMessageNumber) {
+                    messagesContainer.appendChild(createMessageElement(message));
+                       lastMessageNumber = message.message_number;
+                   }
+             });
+        }
+    })
+    .catch(error => {
+        console.error('Error fetching messages:', error);
+        // Stop the interval if something goes wrong
+        if (updateInterval) {
+             clearInterval(updateInterval);
+             updateInterval = null;
+             console.log('Message updates stopped due to an error');
+          }
+    });
+}
+
+// Update messages every 5 seconds
+updateInterval = setInterval(updateMessages, 5000);
\ No newline at end of file
diff --git a/src/anonchat/templates/inquiry.html b/src/anonchat/templates/inquiry.html
index 23f7514..f7af194 100644
--- a/src/anonchat/templates/inquiry.html
+++ b/src/anonchat/templates/inquiry.html
@@ -5,7 +5,7 @@
 {% block title %}{% if is_admin %}Admin View - {% endif %}Inquiry #{{ inquiry.id[:6] }} - {{ config.SITE_TITLE }}{% endblock %}
 
 {% block content %}
-    <div class="inquiry-details">
+    <div class="inquiry-details" id="inquiry-details" data-inquiry-id="{{ inquiry.id }}" data-last-message-number="{{ messages[-1].message_number if messages else 0 }}">
         <h2>Inquiry #{{ inquiry.id[:6] }}</h2>
 
         {% if is_admin %}
@@ -31,7 +31,7 @@
             <div id="messages-list">
                 {% if messages %}
                     {% for message in messages %}
-                        <div class="message {% if message.is_admin %}admin-message{% else %}user-message{% endif %}" data-message-id="{{ message.id }}">
+                        <div class="message {% if message.is_admin %}admin-message{% else %}user-message{% endif %}" data-message-number="{{ message.id }}">
                             <div class="content">
                                 {% if message.is_admin %}<span class="admin-badge">ADMIN:</span> {% endif %}
                                 {{ message.content }}
@@ -57,67 +57,5 @@
         </div>
     </div>
 
-    <script>
-        let lastMessageNumber = {{ messages[-1].message_number if messages else 0 }};
-        const inquiryId = '{{ inquiry.id }}';
-        const messagesContainer = document.getElementById('messages-list');
-        let updateInterval = null;
-
-        function formatTimestamp(timestamp) {
-            const date = new Date(timestamp);
-            const year = date.getFullYear();
-            const month = String(date.getMonth() + 1).padStart(2, '0');
-            const day = String(date.getDate()).padStart(2, '0');
-            const hours = String(date.getHours()).padStart(2, '0');
-            const minutes = String(date.getMinutes()).padStart(2, '0');
-            const seconds = String(date.getSeconds()).padStart(2, '0');
-            return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
-        }
-
-        function createMessageElement(message) {
-            const div = document.createElement('div');
-            div.className = `message ${message.is_admin ? 'admin-message' : 'user-message'}`;
-            div.dataset.messageNumber = message.message_number;
-            div.innerHTML = `
-                <div class="content">
-                    ${message.is_admin ? '<span class="admin-badge">ADMIN:</span> ' : ''}
-                    ${message.content}
-                </div>
-                <div class="timestamp">${formatTimestamp(message.timestamp)}</div>
-            `;
-            return div;
-        }
-
-        function updateMessages() {
-            fetch(`/api/inquiry/${inquiryId}/messages?after_message_number=${lastMessageNumber}`)
-                .then(response => {
-                    if (!response.ok) {
-                        throw new Error(`HTTP error! Status: ${response.status}`);
-                    }
-                    return response.json();
-                })
-                .then(data => {
-                    if (data.messages && data.messages.length > 0) {
-                        data.messages.forEach(message => {
-                            if (message.message_number > lastMessageNumber) {
-                                messagesContainer.appendChild(createMessageElement(message));
-                                lastMessageNumber = message.message_number;
-                            }
-                        });
-                    }
-                })
-                .catch(error => {
-                    console.error('Error fetching messages:', error);
-                    // Stop the interval if something goes wrong
-                    if (updateInterval) {
-                        clearInterval(updateInterval);
-                        updateInterval = null;
-                        console.log('Message updates stopped due to an error');
-                    }
-                });
-        }
-
-        // Update messages every 5 seconds
-        updateInterval = setInterval(updateMessages, 5000);
-    </script>
+    <script src="{{ url_for('static', filename='js/inquiry.js') }}" defer></script>
 {% endblock %} 
\ No newline at end of file