diff --git a/static/js/contacts-filter.js b/static/js/contacts-filter.js
new file mode 100644
index 0000000..5fead51
--- /dev/null
+++ b/static/js/contacts-filter.js
@@ -0,0 +1,50 @@
+// Debounce function
+function debounce(func, wait) {
+    let timeout;
+    return function(...args) {
+        clearTimeout(timeout);
+        timeout = setTimeout(() => func.apply(this, args), wait);
+    };
+}
+
+// Initialize filter functionality
+document.addEventListener('DOMContentLoaded', function() {
+    // Auto-submit the form on select change
+    document.querySelectorAll('#filterForm select').forEach(function(el) {
+        el.addEventListener('change', function() {
+            document.getElementById('filterForm').submit();
+        });
+    });
+
+    // Debounced submit for search input, keep cursor after reload
+    const searchInput = document.querySelector('#filterForm input[name="search"]');
+    if (searchInput) {
+        searchInput.addEventListener('input', debounce(function() {
+            // Save value and cursor position
+            sessionStorage.setItem('searchFocus', '1');
+            sessionStorage.setItem('searchValue', searchInput.value);
+            sessionStorage.setItem('searchPos', searchInput.selectionStart);
+            document.getElementById('filterForm').submit();
+        }, 300));
+
+        // On page load, restore focus and cursor position if needed
+        if (sessionStorage.getItem('searchFocus') === '1') {
+            searchInput.focus();
+            const val = sessionStorage.getItem('searchValue') || '';
+            const pos = parseInt(sessionStorage.getItem('searchPos')) || val.length;
+            searchInput.value = val;
+            searchInput.setSelectionRange(pos, pos);
+            // Clean up
+            sessionStorage.removeItem('searchFocus');
+            sessionStorage.removeItem('searchValue');
+            sessionStorage.removeItem('searchPos');
+        }
+    }
+
+    // Clear button resets all filters and submits the form
+    document.getElementById('clearFilters').addEventListener('click', function() {
+        document.querySelector('#filterForm input[name="search"]').value = '';
+        document.querySelector('#filterForm select[name="role"]').selectedIndex = 0;
+        document.getElementById('filterForm').submit();
+    });
+}); 
\ No newline at end of file
diff --git a/templates/contacts/list.html b/templates/contacts/list.html
index 181a560..014367c 100644
--- a/templates/contacts/list.html
+++ b/templates/contacts/list.html
@@ -43,53 +43,7 @@
                 </button>
             </div>
         </form>
-        <script>
-        // Debounce function
-        function debounce(func, wait) {
-            let timeout;
-            return function(...args) {
-                clearTimeout(timeout);
-                timeout = setTimeout(() => func.apply(this, args), wait);
-            };
-        }
-        // Auto-submit the form on select change
-        document.querySelectorAll('#filterForm select').forEach(function(el) {
-            el.addEventListener('change', function() {
-                document.getElementById('filterForm').submit();
-            });
-        });
-        // Debounced submit for search input, keep cursor after reload
-        const searchInput = document.querySelector('#filterForm input[name="search"]');
-        if (searchInput) {
-            searchInput.addEventListener('input', debounce(function() {
-                // Save value and cursor position
-                sessionStorage.setItem('searchFocus', '1');
-                sessionStorage.setItem('searchValue', searchInput.value);
-                sessionStorage.setItem('searchPos', searchInput.selectionStart);
-                document.getElementById('filterForm').submit();
-            }, 300));
-            // On page load, restore focus and cursor position if needed
-            window.addEventListener('DOMContentLoaded', function() {
-                if (sessionStorage.getItem('searchFocus') === '1') {
-                    searchInput.focus();
-                    const val = sessionStorage.getItem('searchValue') || '';
-                    const pos = parseInt(sessionStorage.getItem('searchPos')) || val.length;
-                    searchInput.value = val;
-                    searchInput.setSelectionRange(pos, pos);
-                    // Clean up
-                    sessionStorage.removeItem('searchFocus');
-                    sessionStorage.removeItem('searchValue');
-                    sessionStorage.removeItem('searchPos');
-                }
-            });
-        }
-        // Clear button resets all filters and submits the form
-        document.getElementById('clearFilters').addEventListener('click', function() {
-            document.querySelector('#filterForm input[name="search"]').value = '';
-            document.querySelector('#filterForm select[name="role"]').selectedIndex = 0;
-            document.getElementById('filterForm').submit();
-        });
-        </script>
+        <script src="{{ url_for('static', filename='js/contacts-filter.js') }}"></script>
     </div>
 
     <!-- Contacts List -->