diff --git a/_includes/js_files.html b/_includes/js_files.html
index 5de951ec..2abd74a9 100644
--- a/_includes/js_files.html
+++ b/_includes/js_files.html
@@ -12,4 +12,5 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
 <script async defer src="https://buttons.github.io/buttons.js"></script>
-<script src="{{ site.baseurl }}/js/page.js"></script>
\ No newline at end of file
+<script src="{{ site.baseurl }}/js/page.js"></script>
+<script src="{{ site.baseurl }}/js/table-search.js"></script>
\ No newline at end of file
diff --git a/collections.html b/collections.html
index 2dc28bf0..504101d2 100644
--- a/collections.html
+++ b/collections.html
@@ -40,26 +40,4 @@ <h1 style="margin-left: auto;margin-right: auto;">Collections</h1>
         </td>
     </tr>
     {% endfor %}
-</table>
-
-<script>
-    const searchInput = document.getElementById('searchInput');
-    const collectionTable = document.getElementById('collectionTable');
-    const rows = collectionTable.getElementsByTagName('tr');
-
-    searchInput.addEventListener('input', function () {
-        const searchValue = searchInput.value.toLowerCase();
-
-        for (let i = 1; i < rows.length; i++) {
-            const name = rows[i].getElementsByTagName('td')[0].textContent.toLowerCase();
-            const maintainer = rows[i].getElementsByTagName('td')[1].textContent.toLowerCase();
-            const repository = rows[i].getElementsByTagName('td')[2].textContent.toLowerCase();
-
-            if (name.includes(searchValue) || maintainer.includes(searchValue) || repository.includes(searchValue)) {
-                rows[i].style.display = '';
-            } else {
-                rows[i].style.display = 'none';
-            }
-        }
-    });
-</script>
\ No newline at end of file
+</table>
\ No newline at end of file
diff --git a/features.html b/features.html
index edf3c062..bb45b091 100644
--- a/features.html
+++ b/features.html
@@ -50,45 +50,4 @@ <h1 style="margin-left: auto;margin-right: auto;">Available Dev Container Featur
     {% endfor %}
     
     {% endfor %}
-</table>
-
-<script>
-    const searchInput = document.getElementById('searchInput');
-    const collectionTable = document.getElementById('collectionTable');
-    const rows = collectionTable.getElementsByTagName('tr');
-
-    function performSearch() {
-        const searchValue = searchInput.value.toLowerCase();
-
-        for (let i = 1; i < rows.length; i++) {
-            const name = rows[i].getElementsByTagName('td')[0].textContent.toLowerCase();
-            const maintainer = rows[i].getElementsByTagName('td')[1].textContent.toLowerCase();
-            const repository = rows[i].getElementsByTagName('td')[2].textContent.toLowerCase();
-
-            if (name.includes(searchValue) || maintainer.includes(searchValue) || repository.includes(searchValue)) {
-                rows[i].style.display = '';
-            } else {
-                rows[i].style.display = 'none';
-            }
-        }
-    }
-
-    searchInput.addEventListener('input', function () {
-        performSearch();
-        const url = new URL(window.location);
-        if (searchInput.value) {
-            url.searchParams.set('search', searchInput.value);
-        } else {
-            url.searchParams.delete('search');
-        }
-        window.history.replaceState({}, '', url);
-    });
-
-    // Read search parameter from URL on page load
-    const urlParams = new URLSearchParams(window.location.search);
-    const searchParam = urlParams.get('search');
-    if (searchParam) {
-        searchInput.value = searchParam;
-        performSearch();
-    }
-</script>
\ No newline at end of file
+</table>
\ No newline at end of file
diff --git a/js/table-search.js b/js/table-search.js
new file mode 100644
index 00000000..9c309fbf
--- /dev/null
+++ b/js/table-search.js
@@ -0,0 +1,53 @@
+(function () {
+    const searchInput = document.getElementById('searchInput');
+    const collectionTable = document.getElementById('collectionTable');
+
+    if (!searchInput || !collectionTable) {
+        return;
+    }
+
+    const rows = collectionTable.getElementsByTagName('tr');
+
+    function performSearch() {
+        const searchValue = searchInput.value.toLowerCase();
+
+        for (let i = 1; i < rows.length; i++) {
+            const name = rows[i].getElementsByTagName('td')[0].textContent.toLowerCase();
+            const maintainer = rows[i].getElementsByTagName('td')[1].textContent.toLowerCase();
+            const repository = rows[i].getElementsByTagName('td')[2] ? rows[i].getElementsByTagName('td')[2].textContent.toLowerCase() : '';
+
+            if (name.includes(searchValue) || maintainer.includes(searchValue) || repository.includes(searchValue)) {
+                rows[i].style.display = '';
+            } else {
+                rows[i].style.display = 'none';
+            }
+        }
+    }
+
+    function updateURL() {
+        const url = new URL(window.location);
+        if (searchInput.value) {
+            url.searchParams.set('search', searchInput.value);
+        } else {
+            url.searchParams.delete('search');
+        }
+        window.history.replaceState({}, '', url);
+    }
+
+    function loadSearchFromURL() {
+        const urlParams = new URLSearchParams(window.location.search);
+        const searchParam = urlParams.get('search');
+        if (searchParam) {
+            searchInput.value = searchParam;
+            performSearch();
+        }
+    }
+
+    searchInput.addEventListener('input', function () {
+        performSearch();
+        updateURL();
+    });
+
+    // Initialize search from URL on page load
+    loadSearchFromURL();
+})();
diff --git a/templates.html b/templates.html
index 14573146..c553789a 100644
--- a/templates.html
+++ b/templates.html
@@ -46,44 +46,4 @@ <h1 style="margin-left: auto;margin-right: auto;">Available Dev Container Templa
     {% endfor %}
     
     {% endfor %}
-</table>
-
-<script>
-    const searchInput = document.getElementById('searchInput');
-    const collectionTable = document.getElementById('collectionTable');
-    const rows = collectionTable.getElementsByTagName('tr');
-
-    function performSearch() {
-        const searchValue = searchInput.value.toLowerCase();
-
-        for (let i = 1; i < rows.length; i++) {
-            const name = rows[i].getElementsByTagName('td')[0].textContent.toLowerCase();
-            const maintainer = rows[i].getElementsByTagName('td')[1].textContent.toLowerCase();
-
-            if (name.includes(searchValue) || maintainer.includes(searchValue)) {
-                rows[i].style.display = '';
-            } else {
-                rows[i].style.display = 'none';
-            }
-        }
-    }
-
-    searchInput.addEventListener('input', function () {
-        performSearch();
-        const url = new URL(window.location);
-        if (searchInput.value) {
-            url.searchParams.set('search', searchInput.value);
-        } else {
-            url.searchParams.delete('search');
-        }
-        window.history.replaceState({}, '', url);
-    });
-
-    // Read search parameter from URL on page load
-    const urlParams = new URLSearchParams(window.location.search);
-    const searchParam = urlParams.get('search');
-    if (searchParam) {
-        searchInput.value = searchParam;
-        performSearch();
-    }
-</script>
\ No newline at end of file
+</table>
\ No newline at end of file