diff --git a/docs.it4i/modules-matrix.md b/docs.it4i/modules-matrix.md
index 93869145e3af38b69063893ef6c900fdda92afc9..044ae71fd9943fea7eb67ef0e84c8bca9c36f8e0 100644
--- a/docs.it4i/modules-matrix.md
+++ b/docs.it4i/modules-matrix.md
@@ -2,9 +2,7 @@
 !!! Hint "Cluster Acronyms"
     A - Anselm • S - Salomon • U - uv1 at Salomon
 
-<input id="searchInput" placeholder="Type To Filter">
-
-| Module | Versions | Clusters |
+| Module </br><input id="searchInput" placeholder="Filter" style="width: 8rem; border-radius: 0.2rem; color: black; padding-left: .2rem;"> | Versions | Clusters |
 | ------ | -------- | -------- |
 | abinit | 7.10.1-gcc-openmpi</br>7.10.1-icc-impi</br>7.6.2 | `--A`</br>`--A`</br>`--A` |
 | ABINIT | 7.10.1-foss-2015b</br>7.10.1-intel-2015b | `US-`</br>`US-` |
@@ -412,39 +410,4 @@
 | XZ | 5.2.2</br>5.2.2-intel-2016.01</br>5.2.2-intel-2017.00</br>5.2.2-foss-2016a | `-SA`</br>`-S-`</br>`USA`</br>`USA` |
 | zlib | 1.2.5</br>1.2.8-GCC-4.9.3</br>1.2.8-GCC-4.4.7-system | `--A`</br>`--A`</br>`U--` |
 
-<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.slim.min.js" integrity="sha256-/SIrNqv8h6QGKDuNoLGA4iret+kyesCkHGzVUUV0shc=" crossorigin="anonymous"></script>
-<script>
-$("#searchInput").keyup(function () {
-    //split the current value of searchInput
-    var data = this.value.split(" ");
-    //create a jquery object of the rows
-    var jo = $("tbody").find("tr");
-    if (this.value == "") {
-        jo.show();
-        return;
-    }
-    //hide all the rows
-    jo.hide();
-
-    //Recusively filter the jquery object to get results.
-    jo.filter(function (i, v) {
-        var $t = $(this);
-        for (var d = 0; d < data.length; ++d) {
-            if ($t.is(":contains('" + data[d] + "')")) {
-                return true;
-            }
-        }
-        return false;
-    })
-    //show the rows that match.
-    .show();
-}).focus(function () {
-    this.value = "";
-    $(this).css({
-        "color": "black"
-    });
-    $(this).unbind('focus');
-}).css({
-	    "color": "#C0C0C0"
-});
-</script>
+---8<--- "modules_matrix_search.md"
diff --git a/docs.it4i/snippets/modules_matrix_search.md b/docs.it4i/snippets/modules_matrix_search.md
new file mode 100644
index 0000000000000000000000000000000000000000..4a7e2f5ccc9f12ee87873d50a2df8efd97fab80f
--- /dev/null
+++ b/docs.it4i/snippets/modules_matrix_search.md
@@ -0,0 +1,35 @@
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.slim.min.js" integrity="sha256-/SIrNqv8h6QGKDuNoLGA4iret+kyesCkHGzVUUV0shc=" crossorigin="anonymous"></script>
+<script>
+$("#searchInput").keyup(function () {
+    //split the current value of searchInput
+    var data = this.value.split(" ");
+    //create a jquery object of the rows
+    var jo = $("tbody").find("tr");
+    if (this.value == "") {
+        jo.show();
+        return;
+    }
+    //hide all the rows
+    jo.hide();
+
+    //Recusively filter the jquery object to get results.
+    jo.filter(function (i, v) {
+        var $t = $(this);
+        for (var d = 0; d < data.length; ++d) {
+            if ($t.is(":contains('" + data[d] + "')")) {
+                return true;
+            }
+        }
+        return false;
+    })
+    //show the rows that match.
+    .show();
+}).focus(function () {
+    this.value = "";
+    $(this).css({
+        "color": "black"
+    });
+}).css({
+	    "color": "#C0C0C0"
+});
+</script>