diff --git a/static/js/room-members.js b/static/js/room-members.js
new file mode 100644
index 0000000..e67b5d3
--- /dev/null
+++ b/static/js/room-members.js
@@ -0,0 +1,16 @@
+$(document).ready(function() {
+    // Initialize Select2 for user selection
+    $('.select2').select2({
+        theme: 'bootstrap-5',
+        width: '100%',
+        placeholder: 'Search for a user...',
+        allowClear: true
+    });
+    
+    // Auto-submit permission form on checkbox change
+    document.querySelectorAll('.auto-save-perms-form input[type="checkbox"]').forEach(function(checkbox) {
+        checkbox.addEventListener('change', function() {
+            this.closest('form').submit();
+        });
+    });
+}); 
\ No newline at end of file
diff --git a/templates/rooms/room_members.html b/templates/rooms/room_members.html
index 458361d..5618c50 100644
--- a/templates/rooms/room_members.html
+++ b/templates/rooms/room_members.html
@@ -130,21 +130,5 @@
 {% block extra_js %}
 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
-<script>
-$(document).ready(function() {
-    $('.select2').select2({
-        theme: 'bootstrap-5',
-        width: '100%',
-        placeholder: 'Search for a user...',
-        allowClear: true
-    });
-    
-    // Auto-submit permission form on checkbox change
-    document.querySelectorAll('.auto-save-perms-form input[type="checkbox"]').forEach(function(checkbox) {
-        checkbox.addEventListener('change', function() {
-            this.closest('form').submit();
-        });
-    });
-});
-</script>
+<script src="{{ url_for('static', filename='js/room-members.js') }}"></script>
 {% endblock %} 
\ No newline at end of file